## 1. node环境
### 1.1 node和npm环境的安装
> 根据以下教程安装，然后设置好环境变量
http://www.runoob.com/nodejs/nodejs-install-setup.html
视频教程 <http://101.110.118.22/github.liaoxuefeng.com/sinaweibopy/video/node/install-node.mp4>
centos如果装不上看这里：https://www.rosehosting.com/blog/how-to-install-node-js-and-npm-on-centos-7/
### 1.2 为npm更改源
> npm默认使用的源的服务器在国外下载速度慢，所以需要更换源
>
> 以下两种方法任选一种
#### 1.2.1使用cnpm代替npm
> 参考链接：https://npm.taobao.org/
```shell
# 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
#安装完cnpm，之后再按照依赖就要使用cnpm
cnpm install [包名]
```
#### 1.2.2为npm更换源
> 参考链接 https://segmentfault.com/a/1190000004444283
修改源为淘宝的源
```shell
npm config set registry http://registry.npm.taobao.org/
```
我们在发布自己包的时候需要将官方的源改回来
```shell
npm config set registry https://registry.npmjs.org/
```
### 1.3 管理(更新)nodejs的版本
> 切换nodejs版本有两种方式，分别是```nvm```和```n```,n更简单推荐使用
#### 使用n管理nodejs版本
> 参考链接 https://www.jianshu.com/p/c641dcc47b48
>
> 官网 https://github.com/tj/n
```shell
#安装
npm install -g n
#使用n下载所需node版本
n 版本号
#下载最新版本
n latest
# 切换版本
输入 n，
然后选中所需版本
#以指定的版本来执行版本
n use 7.4.0 index.js
```
linux使用n安装新版本nodejs之后，如果`node -v`还是原来的版本，那么就需要改变一下环境变量
`vim .bash_profile`
```shell
export NODE_HOME=/usr/local #NODE_HOME改成新版本nodejs安装的目录，如果找不到，find / -name node
export PATH=$NODE_HOME/bin:$PATH
export NODE_PATH=$NODE_HOME/lib/node_modules:$PATH
```
修改环境变量参考：https://blog.csdn.net/yi412/article/details/11523525
### 1.4 package.json文件详解
> 参考文档 http://javascript.ruanyifeng.com/nodejs/packagejson.html
## 2. vue脚手架
> vue-cli目前已经更新到3版本，vue-cli3把webpack相关的配置隐藏起来了，所有的配置都在vue.config.js文件夹中，所以使用vue-cli3需要的webpack水平较高，建议使用vue-cli2
### 3.1 vue-cli2.x安装
参考链接：https://github.com/vuejs/vue-cli/tree/v2#vue-cli--
安装：
```jade
npm install -g vue-cli
```
用法：
```
$ vue init < template-name > < project-name >
```
例：
```
$ vue init webpack my-project
```
目前可用的模块包括：
- [webpack](https://github.com/vuejs-templates/webpack) - 一个功能齐全的Webpack + vue-loader设置，具有热重载，linting，测试和css提取功能。
- [webpack-simple](https://github.com/vuejs-templates/webpack-simple) - 一个简单的Webpack + vue-loader设置，用于快速原型设计。
- [browserify](https://github.com/vuejs-templates/browserify) -全功能Browserify + vueify设置用热重装载，linting＆单元测试。
- browserify [-simple](https://github.com/vuejs-templates/browserify-simple) - 一个简单的Browserify + vueify设置，用于快速原型设计。
- [pwa](https://github.com/vuejs-templates/pwa) - 基于webpack模板的vue-cli的PWA模板
- [simple](https://github.com/vuejs-templates/simple) - 单个HTML文件中最简单的Vue设置
### 3.2 vue-cli3.x安装及配置(仅供参考)
vue-cli3x的官方文档：https://cli.vuejs.org/
Vue-cli3 中vue.config.js文件配置参考文档：https://cli.vuejs.org/zh/config/#integrity
Vue CLI 的包名称由 `vue-cli` 改成了 `@vue/cli`。 如果你已经全局安装了旧版本的 `vue-cli`(1.x 或 2.x)，你需要先通过 `npm uninstall vue-cli -g` 或 `yarn global remove vue-cli` 卸载它。
安装
```js
npm install -g @vue/cli
```
安装了vue-cli3如果还想使用vue-cli2的init功能,需要安装一个桥接功能
```js
npm install -g @vue/cli-init
```
```javascript
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
//例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。
baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
// outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
outputDir: "dist",
//用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
assetsDir: "assets",
//指定生成的 index.html 的输出路径 (打包之后，改变系统默认的index.html的文件名)
// indexPath: "myIndex.html",
//默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
filenameHashing: false,
// lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
`lintOnSave`: true,
//如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置
// lintOnSave: process.env.NODE_ENV !== 'production',
//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false)
// runtimeCompiler: false,
/**
* 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
* 打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
* map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
* 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
* */
productionSourceMap: false,
// 它支持webPack-dev-server的所有选项
devServer: {
host: "localhost",
port: 1111, // 端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
// 配置多个代理
proxy: {
"/api": {
target: "<url>",
ws: true,
changeOrigin: true
},
"/foo": {
target: "<other_url>"
}
}
}
};
```
