1.Vue cli工具安装

1.1 在任何位置打开终端小黑窗，输入命令（需要耐心等待5分钟左右）

• npm install -g @vue/cli

1.2 如果安装失败，例如下图所示。解决方案如下

• 一般是由于网速较慢下载到一半导致中断，多试几次即可

• (1)清除npm缓存，再重新安装

  • 清除缓存命令:npm cache clean -f

• (2)检查有没有安装成功:vue --version

2.Vue脚手架安装流程

2.1 创建vue项目 ：vue create 项目名称

• 注意：

1. 在哪里打开黑窗，就在哪里创建项目
2. 项目名称不要有中文，也不要有大写字母
3. 最好使用系统自带终端打开，千万不要使用git bash

2.2 选择默认配置

• 第一次比较久，需要耐心等待

2.3 成功提示

2.4运行项目

运行项目的命令的位置是项目根目录，与package.json文件同级

• npm run serve
• 终端开启之后不要关闭，此时我们修改代码无需重新运行，浏览器会自动刷新

3.脚手架准备工作：清理欢迎界面与自定义配置

3.1 关闭eslint插件(推荐)

-   eslint是一个插件, 内置在脚手架项目里配置好了, 运行时检查你的代码风格
-   这个插件对代码格式要求很严格， 比如不能随便写分号、代码缩进要规范等等。 对初学者不是很友好，建议关闭

module.exports = {
    // 关闭eslint代码检查
    lintOnSave: false
}

3.2 修改服务器端口号(可选)

脚手架内置的webpack, 配置文件叫vue.config.js

module.exports = {
  devServer: { // 自定义服务配置
    host:'127.0.0.1',
    open: true, // 自动打开浏览器
    port: 3000
  }
}

3.3 删除组件

删除conponents文件夹下的默认介绍组件HelloWorld.vue
清空App.vue中所有代码，然后就可以写自己的代码啦