在我们的开发过程中需要使用到前端,vue将会是一个很好的选择。
1.node下载(地址:https://nodejs.org/en/download/)
![](https://box.kancloud.cn/b1cdff11405caf9a414fd90e3bf027cf_1631x787.png)
2.进行安装
![](https://box.kancloud.cn/c847026940c637b267037850456efad5_499x396.png)
![](https://box.kancloud.cn/88db84c157338272ee801b79f363f1b3_496x386.png)
![](https://box.kancloud.cn/54ff10fc37e822fbe0647bb8f35b20e7_498x389.png)
![](https://box.kancloud.cn/35826de42186a35087411053b8b4dfe4_495x387.png)
![](https://box.kancloud.cn/838c9aaf02b5bf4c74bb4cf62c2f4574_501x392.png)
![](https://box.kancloud.cn/083c18bdc23a1d94060acb53e6fb9633_498x392.png)
![](https://box.kancloud.cn/4bf64ed599fc30c245736b1889f5ab3e_502x387.png)
3.nodejs安装成功后,我们切换到nodejs文件夹下,执行node -v和npm -v,查看版本。
![](https://box.kancloud.cn/ad2981776e95cac2ca49128174302e2e_1157x563.png)
4.创建两个文件夹node_global(配置文件)和node_cache(缓存文件)
![](https://box.kancloud.cn/fb8f30fe3c3440eaef57afb5d714d411_996x442.png)
5.执行设置命令(这里一定要把路径写对)
```
npm config set prefix "C:\nodejs\node_global"
npm config set cache "C:\nodejs\node_cache"
```
![](https://box.kancloud.cn/745280d26143ace6af018d4b8e5765e8_577x257.png)
解决办法,全局搜索.npmrc文件
![](https://box.kancloud.cn/53ab8543edcebf127de9d116ce40e8ca_1580x266.png)
打开并修改
![](https://box.kancloud.cn/d050554eaa5811e04f7681c972b61077_1692x341.png)
![](https://box.kancloud.cn/2572f03d65fb189aca893d02354b170c_578x128.png)
6.接下来设置环境变量,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
![](https://box.kancloud.cn/faac86cb246abdbef5ccbb0e5eaae94a_1551x623.png)
![](https://box.kancloud.cn/df9e712932bf826fbde964be933eff01_1563x798.png)
7.配置完后,安装个module测试下,我们就安装最常用的express模块
```
npm install express -g # -g是全局安装的意思
```
![](https://box.kancloud.cn/86c9a9991bc948845affe0da4fca13d0_584x107.png)
![](https://box.kancloud.cn/4a50b8cef3838fd7c88f023769aec478_1482x433.png)
8.安装cnpm,输入以下命令:
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
9.输入cnpm -v,检测是否正常,但是这里会报错。
![](https://box.kancloud.cn/39e6bde32821154d9ce64de5bc20bdb6_583x370.png)
10.安装vue-cli
```
cnpm install -g vue-cli
```
![](https://box.kancloud.cn/581b8004c37d7a6ff4f3ca9cb3f55483_564x193.png)
11.使用命令vue init webpack vue-demo搭建vue项目, “vue-demo” 是你的项目名称
```
1.项目名称,如果不需要就直接回车。注:`此处项目名不能使用大写`。
Project name (my-project):
2.项目描述,如果不需要就直接回车。
Project description (A Vue.js project):
3.项目作者,默认计算机用户名
Author (xxx):
4.构建方式(暂且这么解释)
两个选择(上下箭头选择,回车即为选定)建议选择 :`Runtime + Compiler:recommended for most users`
这里推荐使用1选项,适合大多数用户的
vue build (Use arrow keys) // 1. (译:运行+编译:被推荐给大多数用户) \> Runtime + Compiler:recommended for most users // 2.(译:只运行大约6KB比较轻量的压缩文件,但只允许模板(或任何VUE特定HTML)。 // VUE文件需要在其他地方呈现函数。翻译不精准,意思大概是选择该构建方式对文件大小有要求) \> Runtime\-only:about 6KB lighter min+gzip,but templates (or any Vue\-specific HTML) are ONLY allowed in .vue files\-render functions are required elsewhere
5.安装vue的路由插件,需要就选y,否则就n
建议 :`Y`
install vue\-router?
6.是否使用ESLint检测你的代码?
`ESLint`是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
建议选择 ‘`N`’ 因为选择 ‘`Y`’ 在做调试项目时,控制台会有很多 黄色警告 提示格式不规范,但其实并不影响项目
Use ESLint to lint your code?
7.是否安装单元测试(暂不详细介绍)
建议 :`N`
Setup unit tests?
8.是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”。)
建议 :`N`
Setup e2e tests with Nightwatch(Y/n)?
9.项目创建后是否要为你运行“npm install”?这里选择包管理工具
选项有三个(上下箭头选择,回车即为选定)建议 :`yes use npm`
Should we run 'npm install' for you after the project has been created?
// 使用npm yes,use npm
// 使用yarn yes,use yarn
// 自己操作 no,I will handle that myself
```
![](https://box.kancloud.cn/7a772145257ddf4f78d82c95d02b3f9f_921x463.png)
![](https://box.kancloud.cn/daf5da7e22765f26c6f172dcc7fc7815_922x640.png)
![](https://box.kancloud.cn/ee1c513a1955bbc90a4194777ceeec18_1708x474.png)
12.安装项目,启动项目
```
cd vue-demo
cnpm install
cnpm run dev
```
![](https://box.kancloud.cn/78ba79f99841122f8f4ccf41f564e925_1703x473.png)
![](https://box.kancloud.cn/5b17423bc8c5ee6ccd23dd96dcaa5150_1803x757.png)
13.项目打包
```
cnpm run build
```
![](https://box.kancloud.cn/904cef83da391cdb0425e09088b4c89e_811x501.png)
![](https://box.kancloud.cn/24f433c8d3b49b5c05e5d6a39072a769_1130x472.png)
![](https://box.kancloud.cn/b36dcd82311c0c8ba62b32ddf4ebfe16_1895x599.png)
需要注意这里需要配置虚拟域名,否则需要将index.html中的就对路径改为相对路径。
![](https://box.kancloud.cn/ad25a1a141a38f5af41bc907c4153bc4_1834x387.png)