vue-创建一个vue项目

1. 统一管理，把vue的内容全部放到指定的目录

[root@izm5e331c21uktboqzfrvqz vue]# mkdir -p /data/wwwroot/vue && cd /data/wwwroot/vue 

2. 使用npm安装vue,需要用到vue和vue-cli

[root@izm5e331c21uktboqzfrvqz vue]# cnpm install vue vue-cli -g
# -g 安装之后全局可以使用

3. 创建一个基于vue的项目

# 敲完命令之后一堆提示，安装自己的实际情况去写就行了
[root@izm5e331c21uktboqzfrvqz vue]# vue init webpack likang-demo
项目名称
? Project name likang-demo
项目介绍
? Project description A Vue.js project
作者
? Author LiKang
是否独立编译
? Vue build standalone
按装路由
? Install vue-router? Yes
是否开启eslint代码检测
? Use ESLint to lint your code? No
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

4. 安装完成之后，运行这个项目，在运行的时候加上& 把他挂到后台去

[root@izm5e331c21uktboqzfrvqz likang-demo]# cd likang-demo/ && npm run dev & 
> [email protected] dev /data/wwwroot/vue/likang-demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

13% building modules 26/31 modules 5 active ...a/wwwroot/vue/likang-demo/src/App.vue{ parser: "babylon" } is deprec 95% emitting                                                                        

DONE  Compiled successfully in 4180ms                                                                                                                                                           12:26:51
I  Your application is running here: http://localhost:8080  

5. 查看是否运行成功

[root@izm5e331c21uktboqzfrvqz vue]# netstat -ntlpu | grep 8080
tcp        0      0 127.0.0.1:8080          0.0.0.0:*               LISTEN      17145/node  

6.打开浏览器访问，服务器ip加上8080，【防火墙和安全组开放该端口】
http://47.104.210.**:8080/

不能访问的问题：

1、开放安全组策略
2、关闭防火墙或者是开放端口
3、修改监听的ip

# Vue项目默认监听的端口是8080，ip是localhost，只允许本地访问，找到vue的配置文件把localhost修改为 0.0.0.0代表可以接受任意请求
[root@izm5e331c21uktboqzfrvqz likang-demo]# vim  ./config/index.js 
# 找到
 // Various Dev Server settings
 # 把localhost修改为 0.0.0.0
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,

修改完成之后重新启动一下，找到对应的进程id

C[root@izm5e331c21uktboqzfrvqz likang-demo]# netstat -ntlp | grep 8080
tcp        0      0 0.0.0.0:8080            0.0.0.0:*               LISTEN      8219/node           
[root@izm5e331c21uktboqzfrvqz likang-demo]# kill -9 8219
[1]+  已杀死               npm run dev
[root@izm5e331c21uktboqzfrvqz likang-demo]# npm run dev &