vue-cli4.x开发环境搭建

1.安装node

node的版本要求大于8.9

2.安装 vue-cli

打开cmd或者powershell

1. 如果之前安装过其他的版本

npm install vue-cli -g

2. 没有安装其他版本，则直接安装

npm install @vue/cli -g

3.检查

vue --version
@vue/cli 4.3.1 // 安装成功的样子

4.创建Vue项目

目前比较常用的有二种，今天主要介绍第一种

1. 基于 交互式命令行
   vue create 项目名

2. 基于图形化界面
   vue ui

5.用交互式命令创建项目

1. 新建项目

vue create my-project

2.进入功能配置

Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
> default (babel, eslint) // 默认
  Manually select features // 自定义
  // 这里我们进入自定义配置，按 enter进入

3.手动选择所有配置

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
// 空格键选中， a键全选， i键全不选
// 其中 babel、 Linter / Formatter是默认选择的
>(*) Babel // 兼容JS代码，让浏览器识别
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support  // 支持渐进式网页应用程序
 ( ) Router  // 路由管理
 ( ) Vuex  // 状态管理
 ( ) CSS Pre-processors  // css预处理
 (*) Linter / Formatter // 代码风格、格式校验
 ( ) Unit Testing // 单元测试
 ( ) E2E Testing // 端对端测试

4.选择 router

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter // 选择的三个配置
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) // 路由器想要使用历史模式吗？ 选n，因为想使用hash

5. 代码风格

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config  // airbnb 设置
  ESLint + Standard config  // 标准配置
  ESLint + Prettier // 更漂亮的

6. 语法规则

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
// 语法规则校验
>(*) Lint on save // 选这个
 ( ) Lint and fix on commit

7.保存文件

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files  // 保存其他的配置文件，选这个
  In package.json  // 保存在pack.json

8.保存模板

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects?
// 将此保存为将来模板的预设，不保存就选n

下面就等项目自己安装了

9.项目启动

（1）进入项目

cd my-project

（2）启动项目

npm run serve // 敲完之后需要等一会，启动服务器

（3）打开网站

  App running at:
  - Local:   http://localhost:8080/  // 我们这个网址
  - Network: http://192.168.1.103:8080/

（4）收获成功