Vue环境搭建

安装Node.js

• 到 https://nodejs.org/en/download/ 下载安装包进行安装
• 相关命令

# 查看 node 版本
node -v  
# 查看 npm 版本（node包管理器）
npm -v
# 更新 npm
npm install npm@latest -g

• hello world： 打开cmd，输入node回车，输入 console.log(“hello world”). 说明node正确安装

配置Node.js相关路径

• node安装之后会默认把包放到 C:\Users\用户名\AppData\Roaming\npm 和 C:\Users\用户名\AppData\Roaming\npm-cache （cache是module下载好前的目录） 下。可以修改这两个位置，方便管理。
• 我直接放到Node的安装目录下：

npm config set prefix "c:\Program Files\nodejs\node_global"
npm config set cache "c:\Program Files\nodejs\node_cache"

记事本打开 C:\Users\用户名\.npmrc文件，说明设置成功。

prefix=c:\Program Files\nodejs\node_global
cache=c:\Program Files\nodejs\node_cache

可以随便安装一个模块试一下是否把模块安装到了这两个目录，如 npm install express –g

• 修改环境变量 ，让Node寻找模块（依赖）到上面配置的路径查找，即c:\Program Files\nodejs\node_global

  • 修改 系统 Path里的C:\Users\用户名\AppData\Roaming\npm\node_modules (如果没有则新增)为 C:\Program Files\nodejs\node_global\node_modules ，这是Node依赖的查找路径之一。
  • 修改 用户 Path里 C:\Users\用户名\AppData\Roaming\npm 为 C:\Program Files\nodejs\node_global，这是Node模块程序的路径，这里修改之后，我们之后安装的 cnpm vue-cli 能直接在命令行运行。

安装cnpm模块（淘宝npm），由于npm安装插件是从国外服务器下载，受网络影响大。因此我们安装cnpm来管理。

• npm install –g cnpm --registry=https://registry.npm.taobao.org
• 安装完成之后可以看到上面配置的 C:\Program Files\nodejs\node_global 和其子文件夹node_modules 有 cnpm和cnpm.cmd 以及cnpm的文件件
• cnpm -v 可以查看相关信息

安装webpack

• webpack 是js应用程序的静态模块打包器(module bundler)，它会将模块打包成bundle
• 当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
• Vue的组件是.vue或.wxml等文件，无法被浏览器解析，需要被翻译和打包为.js文件
• cnpm install webpack -g 安装完之后同样可以在上面配置的路径看到webpack文件夹和webpack.cmd

安装vue-cli（用来生成vue模版的工具）

• vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器。
• vue-cli是脚手架，就是用配置好的模版快速搭起一个项目来，省去配置webpack的基本内容。通过vue init 模版名 项目名，然后再有几个简单设置就建起项目了。
• cnpm install vue-cli –g 安装完之后在上面配置的路径可以看到相关的文件

• 新建 vue 项目测试

  • 命令行进入 d:\vue_helloworld ，输入 vue init webpack vue_helloworld 回车到最后一下 。选择 No I will handle that myselft ， 即我们自己下载依赖，随后我们自己可以进入项目使用 cnpm下载依赖，否则会使用 npm，则慢很多。
  • cd 进入 vue_helloworld ， cnpm install 安装依赖，运行：cnpm run dev ，然后就可以通过浏览器访问。

打包与运行

• 开发的时候运行使用 npm run dev，其实这是使用了node作为一个服务容器来运行，而用了node之后，还增加了一些功能，例如代理后端，改写后端path等。
• 正式运行的时候，前端是使用静态文件来放到服务器运行的，因此不会有nodejs，也需要把在项目里用到的nodejs模块转化为前端js，这时候webpack就起到了作用。通过 npm run build，进行前端构建。构建之后，就是静态文件了，和以前的前端项目结构以及gulp等工具构建没什么太大区别。
• 理解了这个之后，jenkins上的打包，以及web服务器如nginx的配置等，就很好理解了。
• 如果要考虑Vue项目的优化，可以从两个方向入手，一个是nodejs（ts）的性质去优化； 一个是从Vue的性质去优化（例如组件、插件）。
• 当然，前端项目化之后，其实该用到的前端知识还是不会少的，例如，html和css该怎么弄怎么调还是得怎么搞。只不过，Vue之后，引入了nodejs（ts），并且对文件名后缀和结构等稍微做了调整。

可以了解一下几个文件的关系：index.html、main.js、App.vue、index.js之间的关系
一个优化例子（主要是API上（nodejs）的）：Vue项目架构优化