Vue开发指南
1 简介
vue官网：https://cn.vuejs.org/v2/guide/
支持chorme、Firefox、IE9或以上浏览器。
vue是一个轻量级的前端开发框架，最简单的模式，引用vue的js文件就可进行开发，不需要依赖node等工具
这种模式有很多缺点：vue组件模板是字符串，无法使用编辑器的着色，智能提示功能；无法压缩html代码等等。不适合在项目中使用。
项目中推荐vue+webpack+typescript的方式。webpack是前端静态模块打包器，TypeScript是JavaScript类型的超集，它带来了可选的静态类型检查以及最新的ECMAScript特性，可以编译成纯JavaScript。下面将介绍使用这种方式构建项目的流程
 
2 软件安装
2.1 软件列表
软件名 版本 下载地址 备注
nodejs 8.11.3 https://nodejs.org/zh-cn/
vscode 1.24.1 https://code.visualstudio.com/ 编辑器
nodejs插件
nrm 1.0.2 npm安装 帮助切换npm源，可选
vue-cli 2.9.6 npm安装 vue
vscode扩展插件
Beautify 1.3.2 vscode安装 html,js格式化，建议安装
Vetur 0.12.4 vscode安装 vue智能提示，建议安装
Vue VSCode Snippets 1.3.0 vscode安装 vue智能提示，建议安装
vue项目常用库
axios 0.18.0 npm安装 http请求库
babel-polyfill 6.26.0 npm安装 新语法特性兼容老浏览器(ie)
vue-class-component 6.2.0 npm安装 以typescript的class方式写vue程序
vue-property-decorator 6.1.0 npm安装 提供OO的风格Vue Component 方便类型声明
vue-router 3.0.1 npm安装 vue路由，类似http://localhost:8080/#/aa/bb，
#后面的部分就是路由
vuex 3.0.1 npm安装 vue状态管理
vuex-class 0.3.1 npm安装

2.2 vscode推荐配置
“文件”->“首选项”->“设置” 右边"用户设置"
左边显示所有vscode的默认设置
// 将设置放入此文件中以覆盖默认设置
{
“workbench.editor.labelFormat”: “default”,
“workbench.editor.showIcons”: false,
“workbench.tree.horizontalScrolling”: true,
“workbench.list.openMode”:“doubleClick”,
“explorer.autoReveal”: false,
“php.validate.executablePath”: “D:/1green/php/php.exe”,
“update.channel”: “none”,
“editor.autoClosingBrackets”: false,
“files.encoding”: “utf8”,
“editor.insertSpaces”: false,
“editor.minimap.enabled”: false,
“editor.detectIndentation”: false,
“workbench.startupEditor”: “newUntitledFile”,
“editor.links”: false,
“explorer.confirmDragAndDrop”: false,
“files.associations”: {
“.lmp": “xml”,
".vue”: “vue”
},
“extensions.ignoreRecommendations”: true,
“workbench.panel.location”: “bottom”,
“window.menuBarVisibility”: “default”,
“editor.renderWhitespace”: “none”,
“editor.renderControlCharacters”: false,
“window.zoomLevel”: 0,
“emmet.syntaxProfiles”: {
“vue-html”: “html”,
“vue”: “html”
},
“beautify.config”: {
“tabSize”: 4,
“indent_with_tabs”: true
},
“beautify.language”: {
“js”: {
“type”: [
“javascript”,
“json”,
“ts”
],
“filename”: [
“.jshintrc”,
“.jsbeautify”,
“.ts”
]
},
“css”: [
“css”,
“scss”
],
“html”: [
“htm”,
“html”
]
}
}
2.3 vscode安装扩展
最新版初次打开会提示安装中文插件，直接安装就行。

2.4 nodejs全局安装vue-cli

npm install --g vue-cli
3 创建项目
3.1 初始化项目
打开命令行，执行
vue init webpack {项目文件夹名}
Project name 输入项目名
Project description 输入项目描述
Author 输入作者
Vue build 选择Runtime + Compiler: recommended for most users
Install vue-router? 是
Use ESLint to lint your code? 否
Set up unit tests 否
Setup e2e tests with Nightwatch? 否
Should we run npm install for you… 是Yes, use NPM
等待联网下载数据，为了避免每次都要联网下载，可以把刚才的项目保存起来，下次使用直接复制到新项目中去。然后修改package.json中的项目名、描述、作者等信息。
 
3.2 提取公用node_modules/（可选）
node_modules/文件夹存放vue项目所需的所有库文件，约有170MB(接近2万个文件)，每个项目的都复制一份将占用不少硬盘空间。这里提供一个方法使所有vue项目共用一个库路径。
 创建环境变量NODE_PATH，指向"node安装路径/node_modules"。可以修改"node安装路径node_modules/npm/npmrc"文件来修改npm的包安装路径，同时也需要将NODE_PATH修改到对应路径下。
 PATH中添加”npm的包安装路径”;
 创建一个文件来存放公用库文件，比如说node_lib，创建环境变量NODE_LIB指向该文件夹。你也可以在该文件夹下存放其他公用库，比如说angular、gulp等。
 在公用库路径下创建文件夹node_lib/vue，将前面生成的vue项目的node_modules文件夹、package.json拷贝到node_lib/vue下
 在vue项目的上一级目录下创建一个软连接文件夹，指向node_lib/vue/node_modules
mklink /D “%~dp0…\node_modules” “%NODE_LIB%\vue\node_modules”
 清空vue项目下的node_modules文件夹的内容，但是需要保留该文件夹，不能删除
 编译运行前先设置环境变量：
set PATH=%NODE_LIB%\vue\node_modules.bin;%PATH%
set NODE_PATH=%NODE_LIB%\vue\node_modules;%NODE_PATH%
示例：
D:\Program Files\nodejs\node_lib/ =>公用库文件夹，=>NODE_LIB
|-vue/ =>vue公用文件夹
|-node_modules/ =>vue库文件夹
|-package.json =>包引用文件
|-angular/ =>其他公用库
|-gulp/ =>其他公用库
D:\Program Files\nodejs\npmGlobal =>NODE_PATH
E:\project\vue\projectName/ =>项目路径
|-node_modules/ =>软链接，指向%NODE_LIB%/vue/node_modules/
|-projectName/ =>vue项目路径
|-node_modules/ =>空文件夹，不能删除
3.3 添加新的包
如果新的包需要是所有vue项目都公用的，在%NODE_LIB%/vue/路径下打开命令行，只是当前项使用的，则在当前项目路径下打开命令行，执行：
npm install {包名} [-save-dev]
-save-dev表示发布后不需要的包，仅在开发中使用。不加表示发布后需要依赖该包。
如果安装在公用目录下，需要将package.json更新到对应项目目录下。
如果有多个包安装，可以直接在package.json添加包名和版本，再执行"npm install"安装，配置说明请见附录。

npm install
4 配置项目
4.1 css路径设置
css图片路径在发布后可能会出错，修改build/utils.js，添加publicPath: ‘…/…/’

4.2 使用scss
修改build/vue-loader.conf.js，添加
module.exports = {
options: {
loaders: {
scss: ‘vue-style-loader!css-loader!sass-loader’, //

修改build/webpack.base.conf.js，添加
添加
module: {rules: [
{
test: /.s[a|c]ss$/,
loader: ‘style!css!sass’
}
]}

4.3 使用typescript
教程：
https://segmentfault.com/a/1190000011744210?utm_source=tuicool&utm_medium=referral
编辑build/webpack.base.conf.js
Src:resolve(‘./src’) 需要配置

module: {rules: [
{
test: /.tsKaTeX parse error: Expected 'EOF', got '}' at position 72: …tslint-loader' }̲, { test: /\.t…/,
loader: ‘ts-loader’,
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/.vue$/],
}
]}

添加src/vue-shim.d.ts
declare module “.vue" {
import Vue from “vue”;
export default Vue;
}
添加tsconfig.json，根据需要进行修改
{
“include”: [
"src/**/”
],
“exclude”: [
“node_modules”
],
// 编译选项
“compilerOptions”: {
// 输出目录
“outDir”: “./dist”,
// 是否包含可以用于 debug 的 sourceMap
“sourceMap”: true,
// 以严格模式解析
“strict”: true,
// 严格Null检查
“strictNullChecks”: false,
// 采用的模块系统
“module”: “esnext”,
// 如何处理模块
“moduleResolution”: “node”,
// 编译输出目标 ES 版本
“target”: “es5”,
// 允许从没有设置默认导出的模块中默认导入
“allowSyntheticDefaultImports”: true,
“allowUnreachableCode”: true,
// 将每个文件作为单独的模块
“isolatedModules”: false,
// 启用装饰器
“experimentalDecorators”: true,
“strictFunctionTypes”: false,
// 启用设计类型元数据（用于反射）
“emitDecoratorMetadata”: true,
// 在表达式和声明上有隐含的any类型时报错
“noImplicitAny”: false,
// 不是函数的所有返回路径都有返回值时报错。
“noImplicitReturns”: true,
// 从 tslib 导入外部帮助库: 比如__extends，__rest等
“importHelpers”: true,
// 编译过程中打印文件名
“listFiles”: true,
// 移除注释
“removeComments”: true,
“suppressImplicitAnyIndexErrors”: true,
// 允许编译javascript文件
“allowJs”: true,
// 解析非相对模块名的基准目录
“baseUrl”: “./”,
// 指定特殊模块的路径
“paths”: {
“jquery”: [
“node_modules/jquery/dist/jquery”
]
},
// 编译过程中需要引入的库文件的列表
“lib”: [
“dom”,
“es2015”,
“es2015.promise”
]
}
}
添加tslint.json
{
“extends”: “tslint-config-standard”,
“globals”: {
“require”: true
}
}
4.4 webpack-dev-server设置
取消日志
修改build/webpack.dev.conf.js

跨域设置
修改build/webpack.dev.conf.js
devServer:{
headers: {
“Access-Control-Allow-Origin”: “*”
}
}

代理/重定向设置
修改config/index.js
module.exports = {dev: {
proxyTable: {
‘/SuperMap’: {
target: ‘http://localhost:8081/SuperMap’,
secure: false,
changeOrigin: true,
pathRewrite: {
‘^/SuperMap’: ‘’
}
}
},
}

ip端口设置
修改config/index.js，0.0.0.0表示监听所有可用ip
module.exports = {
dev: {
host: ‘0.0.0.0’, // can be overwritten by process.env.HOST
port: 8080,
}}

4.5 不打包第三方库的版权注释
修改build/webpack.prod.conf.js
uglifyOptions: {
output: {
comments: false
},
}

4.6 减小发布体积
修改config/index.js
build{
productionSourceMap: false,
devtool: ‘cheap-module-source-map’,
}

4.7 url跳转使用相对路径
修改config/index.js
build{
assetsPublicPath: ‘./’,
}

4.8 polyfill设置
修改build/webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, ‘…/’),
entry: {
polyfill: ‘babel-polyfill’,
app: ‘./src/main.ts’, },
}

修改webpack.dev.conf.js
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘index.html’,
inject: true,
chunks: [‘manifest’, ‘polyfill’, ‘app’]
}),

修改webpack.prod.conf.js
new HtmlWebpackPlugin({
filename: config.build.index,
template: ‘index.html’,
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: ‘dependency’,
chunks: [‘manifest’, ‘polyfill’, ‘app’]
}),

如果有多个页面，需要分别进行设置。
4.9 多页面应用设置
教程：https://blog.csdn.net/Tank_in_the_street/article/details/73732801
编辑build/webpack.base.conf.js

其中app、login和authorityManage为三个页面
编辑build/webpack.dev.conf.js，每个页面添加一个HtmlWebpackPlugin
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘index.html’,
inject: true,
chunks: [‘manifest’, ‘polyfill’, ‘app’]
}),
new HtmlWebpackPlugin({
filename: ‘land.html’,
template: ‘land.html’,
inject: true,
chunks: [‘manifest’, ‘polyfill’, ‘login’]
}),

编辑build/webpack.prod.conf.js，每个页面添加一个HtmlWebpackPlugin
chunksSortMode: ‘dependency’,
chunks: [‘manifest’, ‘polyfill’, ‘app’]
，
new HtmlWebpackPlugin({
filename: config.build.login,
template: ‘land.html’,
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: ‘dependency’,
chunks: [‘manifest’, ‘polyfill’, ‘login’]
}),

编辑config/index.js
build: {
// Template for index.html
index: path.resolve(__dirname, ‘…/dist/index.html’),
login: path.resolve(__dirname, ‘…/dist/land.html’),
authorityManage: path.resolve(__dirname, ‘…/dist/user.html’),
}

4.10 git忽略库设置
编辑.gitignore，添加
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

Editor directories and files

.idea
.vscode
.vs
*.suo
.ntvs
*.njsproj
*.sln
5 编译、运行
开发时使用webpack-dev-server启动web服务：

npm run dev
编译：
npm run build
编译输出路径为：“vue项目路径/dist/”
 
6 代码规范(建议)
6.1 vue
 组件逻辑代码和样式文件分离
 使用Tab缩进，Tab占4个空格
 使用scss的嵌套语法代替css的多级选择器
 属于该组件的样式写在该组件内，公用的样式写入样式文件

//DemoTs.ts
export default class Demo{
//逻辑代码
created(){ }
}
6.2 typescript
 默认导出类名和文件名一致
 类名、装饰器、enum属性首字母大写
 属性和方法首字母小写
 大括号"{"和类、函数、控制语句保持在同一行
 控制语句内容和关键字在同一行可以省略括号，不在同一行不能省略
 使用Tab缩进，Tab占4个空格
 + - = < 等运算符两边加空格
 for循环分号后加空格
 优雅地注释
 没有必要添加创建日期、作者、修改内容等信息，而是使用Git管理
//DemoTs.ts =>导出类名和文件名一致,vue组件名和ts文件名不能相同，可以加一个"Ts"后缀
import Aaa from ‘src/aaa’ =>使用绝对路径，而不是相对路径，除非两个文件非常紧密相关
import Demo1 from ‘./Demo1’
//注释
export default class Demo { =>括号和类名在同一行
enum Week{
Moday, Tuesday =>enum属性首字母大写
};
//注释 =>注释和属性缩进相同
attr:string = “”; =>属性和方法首字母小写
attr1:string = “”; //注释1 =>属性长度相近的注释使用缩进对齐
attr2:string = “”; //注释2
fun(){ =>不要把注释写在大括号后
//注释

	if(true) return;		=>可以省略括号
	if(true){			=>不能省略括号
		return;
	}
	//注释		=>不要将注释写在代码后面，而是在代码上一行，除非有大量长度相近的
				  代码块需要注释
	var len = 3 + 4;			=>算符两边加空格
	var a1 = 1;		//注释1	=>使用缩进对齐
	var a2 = 2;		//注释2
	var a3 = 3;		//注释3
	for(var i = 0; i < len; ++i){	=>for循环分号后加空格
	}
}

}
6.3 图片
使用ps导出图片时使用"存储为Web所用格式"(Ctrl+Alt+Shift+S)，这将去除图片元数据，使文件体积更小。 
附录
npm全局安装和本地安装
全局安装将安装在npm的npmrc指定的路径下，本地安装将安装在当前工作路径下。
如：

npm install vue-cli -g
npm install vue
版本号的^和~
node的package.json中的版本号经常看到有带^和~，此符号用来指示node如何进行包升级。
https://www.cnblogs.com/beileixinqing/p/7096806.html?utm_source=itdadao&utm_medium=referral
一个完整的版本号组表示为： [主要版本号，次要版本号，补丁版本号]
 指定~
版本号中如果指定了主要版本、次要版本，则只允许补丁版本升级；
如果只指定了主要版本，则允许次要版本、补丁版本升级
 指定^
允许不会改变最左边的不为零的版本号的版本提升，也就是说，^{1.0.0允许次要、补丁版本升级，}0.1.0允许补丁版本升级，^0.0.x 不允许升级。
dependencies和devDependencies的区别
node的package.json中有两种依赖，一种是dependencies，另一种是devDependencies
 dependencies：依赖的项是正常运行该包时所需要的依赖项
 devDependencies：开发过程中需要的依赖项，例如一些进行单元测试的包。
如：
npm install vue -save
npm install webpack -save-dev
vue是需要在发布后依然使用的库，所以是dependencies。
webpack只是打包的工具，运行过程中是不需要的，所以是devDependencies。