vue环境的部署

1. 安装node 

本环境用的自带的 rh yum源：

[root@localhost tmp]#  yum install rh-nodejs8.x86_64

--> Running transaction check

Downloading packages:
(1/4): rh-nodejs8-3.0-5.el7.x86_64.rpm | 6.8 kB 00:00:00
(2/4): rh-nodejs8-npm-6.4.1-8.16.1.2.el7.x86_64.rpm | 3.9 MB 00:00:02
(3/4): rh-nodejs8-runtime-3.0-5.el7.x86_64.rpm | 1.1 MB 00:00:03
(4/4): rh-nodejs8-nodejs-8.16.1-2.el7.x86_64.rpm | 7.2 MB 00:00:05

Installed:
rh-nodejs8.x86_64 0:3.0-5.el7

Dependency Installed:
rh-nodejs8-nodejs.x86_64 0:8.16.1-2.el7 rh-nodejs8-npm.x86_64 0:6.4.1-8.16.1.2.el7 rh-nodejs8-runtime.x86_64 0:3.0-5.el7

Complete!

验证： 

[root@localhost rh-nodejs8]# source /opt/rh/rh-nodejs8/enable
[root@localhost rh-nodejs8]# node -v
v8.16.1
[root@localhost rh-nodejs8]# npm -v
6.4.1

安装 cnpm：

[root@localhost vue-devtools]# npm install -g cnpm --registry=https://registry.npm.taobao.org

 

2. 安装  vue 调试工具vue-devtools

[root@localhost proj_vue]# git clone -b master https://www.github.com/vuejs/vue-devtools.git   # 必须是master分支，默认是dev，真坑人

[root@localhost vue-devtools]# cnpm install

[root@localhost vue-devtools-master]# cnpm  run build 

打包后的目录为当前目录下 shells/chrome

打开chrome浏览器，进入扩展程序，选择开发者模式。加载已解压的目录，选择 shells/chrome 点确定即可。然后在关闭开发者模式

 

3. 安装 vue 

[root@localhost proj_vue]#  cnpm install vue 

安装 cli 命令行工具

[root@localhost proj_vue]#  cnpm install --global vue-cli 

验证： 

[root@localhost shells]# vue -V
2.9.6

 

5. 构建一个应用

[root@localhost shells]# vue init webpack movie_view   #自动创建目录 movie_view   

? Project name movie_view
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

vue-cli · Generated "movie_view".

# Project initialization finished!
# ========================

To get started:

cd movie_view
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

6. 启动应用并用chrome 调试

在package.json 文件中可以看到启动的命令 

"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"test": "npm run unit",
"build": "node build/build.js"
},

 

修改ip地址： vim config/index.js  

执行cnpm run Dev