Vue环境安装与项目部署

一、安装nodejs环境

1.官网下载nodejs:https://nodejs.org/zh-cn/download/

 

 

 

2.下载完成,安装node。安装完成后,cmd命令行查看node是否安装成功

 

 

 

3.在node的安装目录下新建两个文件夹:

node_global                       node_cache

 

 

 

4.建好两个空文件夹之后,打开cmd命令行,输入:

npm config set prefix "D:\Develop\nodejs\node_global"

npm config set cache "D:\Develop\nodejs\node_cache"

 

5.配置环境变量

 

 

 

 

6.配置完成后,可以安装express模块进行测试

 

 

express安装完成后

 

如果没有报错,node基本算是安装成功了

 

 

 

 

二、安装Vue-CLI(脚手架工具)

1、 安装NodeJS环境

2、 DOS执行 npm install -g vue-cli(如果路径出错就执行cnpm install -g vue-cli)

3、 cd到vue的项目文件夹下

4、 执行vue init webpack vue-playlist

5、 切换到vue-playlist目录下,执行npm run dev,就可启动该项目

6、 安装路由模块:npm install vue-router --save-dev

安装vue-resource:npm install vue-resource --save-dev

三、Vue项目的部署

1、npm run build

  项目目录下执行npm run build,会在项目目录下生成dist文件夹

2、Node上启动Vue项目

  在服务器上创建项目目录,例如example,将第一步中dist文件夹下的所有内容移入,并创建index.js。index.js大致内容如下:

const Express = require("express")
const App = Express()
const path = require("path")

App.use("/ReadingOcean/wechat/scripts", Express.static("scripts"))
App.use("/ReadingOcean/wechat/static", Express.static("static"))

App.get("/", (req, res) => {
  res.redirect("/example")
})

/*
*项目配置,省略,配置文件的example对应真实项目路径
*/ App.get(
"/example", (req, res) => { res.sendFile(path.resolve(__dirname, "./login.html")) }) App.use((req, res) => { res.sendFile(path.resolve(__dirname, "./home.html")) }) App.listen(8081)

  进入命令提示符,切换到example目录下,执行pm2 start index.js,可执行pm2 list查看启动的应用。

pm2的一些命令:

npm install -g pm2      安装pm2

pm2 start index.js      启动index.js

pm2 list            查看启动的应用

pm2 show index        查看详细信息

pm2 logs            查看当前信息

pm2 stop index        停止index

pm2 delete index        删除index

猜你喜欢

转载自www.cnblogs.com/MilesHo/p/11312817.html