### 1、安装Nodejs
安装包地址，选择自己对应操作系统的版本
`https://npm.taobao.org/mirrors/node/latest-v4.x/`

拉取安装包：
`wget https://npm.taobao.org/mirrors/node/latest-v4.x/node-v4.9.1-linux-x64.tar.gz`
解压：
`tar -zxvf node-v4.9.1-linux-x64.tar.gz`
设置环境变量：
`export PATH=$PATH:/root/node-v4.9.1-linux-x64/bin`
如果这里无效，请用`find`命令，查找正确的`bin`文件夹

### 2、安装CNMP（非必要）
由于`NMP`源都在国外，下载相关资源很慢，所以建议用国内的淘宝NPM镜像（http://npm.taobao.org/）
通过`cnmp`命令安装的包都会从淘宝NMP下载，速度很快。

`npm install -g cnpm --registry=https://registry.npm.taobao.org`

安装完之后，nmp安装模块的命令就变为：
`cnpm install [name]`

同步模块命令为：
`cnpm sync connect`

### 3、安装Webpack
`cnpm install webpack -g`

然后`webapck -v`看看版本，
这时候可能出现：
`SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside stric`

错误，是因为node的版本太低了，我们接下来升级node.js的版本
`cnpm install -g n`

升级node.js到最新稳定版
`n stable`

注意，如果你想自己指定版本，n后面也可以跟随版本号比如：
`n v0.10.26`
`n 0.10.26`

这时候我们再用
`find / -name webpack`
找到，webpack的目录，

然后使用
`/root/node-v4.9.1-linux-x64/bin/webpack -v`
查看版本，这时候会提示你
`Do you want to install 'webpack-cli' (yes/no):`
我们输入`yes`进行安装webpack-cli组件。
安装完成后，我们再使用
`webpack -v`
能查看到版本号，就表示webpack能够正常运行了。

另外分享几个npm的常用命令：
```
npm -v #显示版本，检查npm 是否正确安装。
npm install express #安装express模块
npm install -g express #全局安装express模块
npm list #列出已安装模块
npm show express #显示模块详情
npm update #升级当前目录下的项目的所有模块
npm update express #升级当前目录下的项目的指定模块
npm update -g express #升级全局安装的express模块
npm uninstall express #删除指定的模块
```
到这里，安装vue-cli的准备工作就完成了。接着往下看..............

### 4、安装vue-cli手脚架
`npm install vue-cli -g`
安装完成之后输入 `vue -V`（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

这时候，我们使用`cd`命令，进入自己想要生成手脚架的存放目录中，例如：
`cd /var/www/vue2/`
然后再使用以下命令安装手脚架：
`vue init webpack vue-demo`
注意这里的“vue-demo” 是项目的名称可以说是随便的起名，但是需要主要的是“不能用中文”。

下面是对应命令的解析说明：
```
vue init webpack vue-demo --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人强烈建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev
```
这时候再用cd命令进入自己创建的项目目录，例如：
`cd vue-demo`

安装项目依赖：
`npm install`，因为自动构建过程中已存在`package.json`文件，所以这里直接安装依赖就行。
不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)，但是但是如果真的安装“个把”小时也没成功那就用：`cnpm install` 吧。
个人建议，能等就等吧。

### 5、启动vue-cli
安装 vue 路由模块 `vue-router` 和网络请求模块 `vue-resource`，输入：
`cnpm install vue-router vue-resource --save`
如果这里cnpm装不了，可以换回npm，包不大。

创建完成的“exprice”目录是如下这样的：
![](https://blog.junphp.com/public/upload/20181031091951_410.png)
下面我简单的说明下各个目录都是干嘛的：
![](https://blog.junphp.com/public/upload/20181031092001_310.png)
打开文件
`/var/www/vue2/vue-demo/config/index.js`
将里面的
`host: 'localhost',`
修改为
`host: '你的服务器私有ip',`

启动项目，输入：
`npm run dev`
注意，这个命令并不是后台运行，如果你退出命令行界面，就会停止运行了。
如果你需要后台运行，命令改为：
`nohup node servier.js >>/dev/log_node.log 2>&1 &`
`nohup npm run dev >/dev/null 2>&1 &`
注意：这里如果我们不先将node的服务也用守护进程的方式启动，就算nohup了vue的服务，也是会掉线的。
服务启动成功后浏览器会默认打开一个“欢迎页面”，如下图：
![](https://blog.junphp.com/public/upload/20181031092026_302.png)

注意：这里是默认服务启动的是本地的`8080`端口，
所以请确保你的`8080`端口不被别的程序所占用，当然你也可以在`index.js`中自己修改端口设置。

同时注意，`host`中设置的是`私有IP`，而你从浏览器中访问，则需要使用`公有IP`。

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺