Vue脚手架的简单搭建（vue-cli 2.0/3.0）

vue-cli 2.0

1.webpack的三个相关依赖：npm i webpack webpack-cli webpack-dev-server -g //这三个依赖全局安装一次今后无需安装

2.安装2.0脚手架：npm i -g vue-cli

3.创建项目：vue init webpack projectName（projectName为项目名）
//注意创建过程中Eslint检查代码规范、unit tests单元测试、e2e tests端对端这3个测试开始可以先关闭就ok

4.项目启动：npm run dev
项目打包：npm run build

5.进入项目并启动项目：
cd projectName //进入项目
npm run dev //启动项目

6.脚手架配置文件功能：

（1）src文件夹里的main.js是主配置文件，或叫页面程序入口文件，用来加载各个公共组件：
（2）main.js同级的App.vue文件，三部分：
template（模版）：写html结构
script标签：template有了组件结构，这里创建组件对象（不是注册组件）
style标签：写css样式

（3）路由文件夹router里的index.js文件，配置路由规则：

（4）build文件夹：webpack的相关配置

（5）config文件夹：vue的基本配置文件，像打包等输出和监听端口等相关配置

（6）static文件夹：静态资源（例如图片）和json数据类

（7）package.json文件：项目的基本信息（例如项目名称、版本和开发所需模块）

（8）index.html文件：页面入口

vue-cli 3.0

注：如果要搭建vue-cli 3.0的脚手架，首先需要卸载2.0脚手架的相关配置：npm uninstall -g vue-cli

1.三个webpack依赖已经全局安装过的无需再次安装

2.安装3.0脚手架：npm install -g @vue/cli
vue-V 可以查看版本是否安装成功

3.创建项目：vue create projectName
这里和2.0不同。2.0是选择模版，3.0是预设presets

上面是默认配置，下面是自定义配置

自定义配置的过程：

上图中，需要安装哪个就选择哪个
完成安装

4.vu-cli3.0的目录比2.0的精简很多：
public文件夹相当于2.0的static文件夹
默认目录没有build和config这两个文件夹
需要配置webpack则需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录）

5.项目启动：npm run server
语法监测：npm run lint