Vue搭建项目环境

Vue新手入门【搭建项目】

前言 : 一入IT深似苦，唯有代码解忧愁；习得后端习前端，前后通吃可还行；
面试中经常出现这么一段对话：
 面试官 : 会前端么?
 我 : html、css、jquery、javascript有用过
 面试官 : Vue有使用过么？
 我 : (此刻内心有些无语)
于是便入手了Vue，俗话说的好：技多不压身(总有用到的时候)

1. Vue环境搭建
 1.1安装node.js
 首先需要去NodeJS官网下载并且安装Node.js，如果不会安装的童鞋，送你一个传送门，安装完成之后，打开cmd，输入node -v 查看node.js版本

注意：安装好node.js之后npm自动就安装好了，如果你需要全局使用的话，那么需要配置一下环境变量
 1.2安装cnpm(因为npm是国外的，可能会导致下载依赖失败，推荐使用国内淘宝的cnpm)
 运行命令：npm install -g cnpm --registry=http://registry.npm.taobao.org (-g是全局安装)

 1.3安装脚手架工具(@vue/cli GUI)
 如果已经安装vue-cli的话先卸载，执行命令：npm uninstall vue-cli -g
 安装@vue-cli，运行命令：cnpm install -g @vue/cli，安装完成之后vue --version查看版本信息

 顺便提一下@vue/cli和vue-cli的区别：版本不一样，前者版本比较高，后者是3.x之前的版本，@vue/cli自带GUI(图形化界面，3.0以上版本才有)(图片与命令相对应)

2. 创建Vue项目
 前面环境都搭好了的话，直接开始初始化，初始化项目有很多种方式
 vue-cli 2.x：vue init webpack 项目名
 vue-cli 3.x：vue create 项目名，但是可以自由选择配置

 我们以3.x版本为例
 注意：上下键进行选择，空格选中，回车确定

 第一步，选择模板

 第二步，选择项目配置

 第三步，根据上面的配置进行进一步的选择，完成之后，回车即开始构建项目

1 TypeScript
是否使用class风格的组件语法：Use class-style component syntax?
是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?

2. Router 路由管理器
路由使用历史模式:Use history mode for router? (Requires proper server setup for index fallback in production) 

3. CSS Pre-processors css预处理
选择CSS 预处理类型:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)  
选项：
	Less
	Sass
	Stylus
	
4. Linter / Formatter 代码风格、格式校验
选择Linter / Formatter类型:Pick a linter / formatter config:
选项：
	TSLint
	ESLint with error prevention only  仅错误预防
	ESLint + Airbnb config  Airbnb配置
	ESLint + Standard config 标准配置
	ESLint + Prettier
选择lint方式：Pick additional lint features
选项：
	Lint on save 保存时检查
    Lint and fix on commit 提交时检查
    
 5. Unit Testing 单元测试
选择unit testing类型：Pick a unit testing solution: (Use arrow keys)
选项：
	Mocha + Chai  
    Jest 
    
6. E2E Testing E2E（End To End）即端对端测试
选择E2E testing类型：Pick a E2E testing solution: (Use arrow keys)
选项：
	Cypress (Chrome only) 
    Nightwatch (Selenium-based)
    
7. 选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
 选项：
	In dedicated config files 在专用的配置文件中
    In package.json 在package.json
    
8. 将此作为将来项目的预置吗？
 Save this as a preset for future projects?
 选项：
	In dedicated config files 在专用的配置文件中
    In package.json 在package.json
    
9.保存预设为模板
Save preset as:

 第四步，启动项目

 第五步，查看网页，能够成功访问，那么恭喜你，已经学会了搭建一个简单的vue项目.

结束语 : 书山有路勤为径，学海无涯苦作舟(共勉)；

(PS : 如果不对之处，还请多多指教，共同学习进步）