Morning Star's blog
  2. 前端开发
  3. Vue框架

本文的目标是支持线下Vue课程的学员完成课堂练习，或是在课后回顾课程内容时复盘整个练习。所以在本文中不会讲解Vue的运行原理，这些可以参考本站的其它文章。

开发工具链

为完成本练习，你需要准备以下的一些工具：

  1. NodejS 官网
  2. Yarn 官网
  3. Vue CLI 官网
  4. Visual Studio Code 官网

环境准备(Windows)

安装NodeJS

直接官网选择合适你机器操作系统的版本下载，建议选择LTS的版本（当前版本为10.16.0 LTS）。下载以后直接运行文件进行安装

安装Yarn

直接官网选择合适你机器操作系统的版本下载。下载以后直接运行文件进行安装

安装VS Code

直接官网下载最新的版本。下载后直接运行文件进行安装

安装Vue CLI

使用Yarn进行安装，执行一下命令:

1
yarn global add @vue/cli

系统显示:

1
2
3
4
5
6
7
8
yarn global v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "@vue/cli@3.9.3" with binaries:
      - vue
✨  Done in 99.41s.

说明安装正常，默认时安装最新的版本

创建Vue项目

在Windwos中，我们选择将项目建立在D盘的根目录下。目录名为vue-todo-app, 以后文章中提到项目目录(PROJECT_ROOT)指的就是d:\todo-web-app,
在命令行执行:

1
2
d:
vue create vue-todo-app

运行后，系统会提示是否选择一个预设置集, 在本实验中，简单的选择”default”

1
2
3
4
Vue CLI v3.9.3
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

接下来，系统会根据项目模版构建项目结构并自动下载相关的依赖包:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Vue CLI v3.9.3
✨  Creating project in d:/vue-todo-app.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.13.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...


success Saved lockfile.
✨  Done in 48.22s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 10.01s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-todo-app.
👉  Get started with the following commands:

 $ cd vue-todo-app
 $ yarn serve

运行Vue项目

建立完项目以后，先不做任何改动，启动项目，观察运行情况，以验证以上步骤是否执行正确:

1
2
cd vue-todo-app
yarn serve

如果正常执行，你可以看到系统显示:

1
2
3
4
5
6
7
8
9
10
11
12
13
yarn run v1.13.0
$ vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin                                                .  
 DONE  Compiled successfully in 4358ms                                  23:38:18

 
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.20.10.3:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

然后用浏览器访问本机的4200端口， http://localhost:8080/ 就可以看到vue cli为我们构建好的项目骨架运行的效果了。

TAGS