vue-cli 3.x 搭建项目

1. 环境准备

1.1 安装node.js

1.2 安装 cnpm，由于npm在使用过程中速度较慢且容易丢包，建议使用 cnpm，安装完成后，以下命令行中npm字段均可改为cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

1.3 安装 vue-cli 3.x

npm install -g @vue/cli

• 安装完成后可以使用这个命令来检查是否安装成功和版本

vue --version
# OR
vue -V

• 显示正确版本表示安装成功

2. 创建项目

2.1 默认配置（使用 vue-cli 的默认配置创建项目）

• 在存放项目的文件夹内打开命令窗口，输入以下命令创建项目，我的项目名为 auto-project

vue create auto-project

• 首先会让你选择默认配置（default）和手动配置（Manually），（注：现在vue-cli3.0默认使用yarn下载）

选择默认配置，一直回车即可

2.2 手动配置（使用 vue-cli 的配置菜单自己选择配置项）

• 在存放项目的文件夹内打开命令窗口，输入以下命令创建项目，我的项目名为 self-project

vue create self-project

• 选择 Manually select features，会出现以下选项

注意：上下方向键控制选择选项，空格为选择或取消，a键为全选

• vue-router 默认 hash 模式，所以我选择默认的，选择了 n ，而不是 history 模式

• 接下来选择使用哪种css预处理语言，我选择 Sass/Scss

• 接下来就是像babel, postcss, eslint等配置文件的存放位置，第一个是：独立文件放置，第二个是：放package.json里，选择第一个

• 然后就是选择是否保存该配置，以便后期项目搭建，我选择了n

• 然后等待项目初始化即可，出现以下内容即为搭建完成

• 启动项目

// 1. 进入项目
cd self-project
// 2. 启动
npm run serve