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为我们构建好的项目骨架运行的效果了。

本文标题:Vue课程实验手册(一)

文章作者:梅老师

发布时间:2019年07月31日 - 16:07

最后更新:2020年05月28日 - 16:05

原始链接:https://www.mls-tech.info/web/vue/vue-practice-manual/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。