vue-cli脚手架搭建简单项目（Visual Studio Code，基于vue4.x版本）

1.安装vue-cli

PS E:\vue-workspace> npm install -g @vue/cli

2.查看是否安装成功

PS E:\vue-workspace> vue -V
@vue/cli 4.1.1

3.创建项目test

PS E:\vue-workspace> vue create test

4.选择配置，“空格”进行选择，“回车”进入下一步，依次选择：
（1）Manually select features（自定义配置）
（2）Babel、Router、Vuex、CSS Pre-processors、Linter/Formatter
（3）Less
（4）ESLint + Standard config
（5）Lint on save（保存就检测）
（6）In dedicated config files（独立的配置文件）
（7）Y（保存配置，需键入名称，在（1）时可选择），n不保存
5.创建项目中，下载依赖模块需等待较长时间，根据网速情况约等待几分钟至几十分钟不等
6.进入项目根目录

PS E:\vue-workspace> cd test

7.运行项目

PS E:\vue-workspace\test> npm run serve

8.进入测试页面

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

Ctrl+右键点击上面任一地址，可在浏览器中看到如下页面：

9.test目录目录结构如下：

修改index.html和main.js两个文件
（1）index.html

（2）main.js

/* eslint-disable no-new */
import Vue from 'vue/dist/vue.js'
new Vue({
  el: '#app',
  template: '
hello world
'
})

<注>import Vue from 'vue/dist/vue.js’不可写成import Vue from ‘vue’； ¹
10.重新打开测试页面，html中定义的#app节点已被p标签替换

至此，一个简单的vue项目全部搭建完成！

---

1. Vue2.0升级之旅. ↩︎