【1.2 - 前端Vue】Vue.js脚手架Vue-cli搭建

Vue项目

在创建过程中，Vue-cli2项目的目录结构如下：

|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico //项目logo
|-- index.html // 入口页面
|-- package.json // 项目基本信息

结构更多请参考：vue-cli（脚手架）目录结构认识、vue-cli脚手架目录一览

Vue-cli搭建准备工作

1. 安装node.js，请参考【0.2 - 前端基础】Node.js安装与简单使用
2. 安装webpack

npm install webpack -g

Vue-cli2版本搭建方式

1. 切换数据源

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

2. 安装vue-cli

npm install vue-cli –g

3. 项目初始化

vue init webpack projectName(项目名)

#安装结构如下
Project name:——项目名称

Project description:——项目描述

Author:——作者

Vue build:——构建模式，默认选择第一种

Install vue-router?:——是否安装引入vue-router，vue-router是路由组件,建议选择

Use ESLint to lint your code?:——建议选no 

4. 进入项目目录

#也可以使用vscode等工具打开
cd projectName(项目名)

5. 安装依赖，启动项目

npm install
npm run dev

Vue-cli3版本搭建方式

1. nrm安装，切换数据源

npm i nrm -g
nrm ls
#找到淘宝的数据源切换
nrm use taobao
#yarn安装nrm
#yarn global add nrm

2. yarn安装

npm i yarn -g

3. 安装Vue-cli3

npm i @vue/cli -g

4. 初始化项目（方法一）

vue create projectName(项目名)

#安装结构如下
选择手动安装：Manually select features
勾选依赖：Babel编译、使用Router路由、VueX状态管理器、CSS预处理器、Unit单元测试
CSS预处理器语言选择：LESS
单元测试解决方案选择： Jest
配置文件存放位置选择：dedicated config files

5. 项目启动和打包

#依赖初始化/下载
yarn install
#启动
yarn serve
#打包
yarn build
#执行lint
yarn lint
#执行单元测试
yarn 项目名:unit

Vue-cli3完整搭建配置请参考：使用Vue-cli 3.0搭建Vue项目