VUE脚手架搭建运行及部署

Posted 2021-05-15 gsls200808

VUE脚手架搭建
1.安装nodejs
官网 https://nodejs.org/en/
下载地址 https://nodejs.org/dist/v14.16.1/node-v14.16.1-x64.msi
验证安装

node -v
npm -v

2.安装vue-cli

npm install -g vue-cli

淘宝镜像方式安装

npm config set registry http://registry.npm.taobao.org/
npm install -g vue-cli

验证

npm config ls

3.构建vue-cli项目
3.1 初始化脚手架
vue init webpack projectname
Project name:——项目名称
Project description:——项目描述
Author:——作者
Vue build:——构建模式，一般默认选择第一种
Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到
Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦，eslint的格式验证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度
Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，可以不用安装
==============
初始化vuedemo

D:
vue init webpack vuedemo

? Project name vuedemo
? Project description A Vue.js project
? Author demo <[e-mail]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? 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

 

3.2 安装依赖
如果前面是代码+运行时独立模式，不需要这步，如果是纯代码不带运行时模式，需要这步

cd projectdir
npm install

查看webpack版本

cat node_modules/webpack/package.json
type node_modules/webpack/package.json

 

3.3 运行

cd projectdir
npm run dev

访问
http://localhost:8080

3.4 打包及部署到nginx

cd projectdir
npm run build

dist目录下的文件拷贝到nginx的html目录下
运行nginx
访问
http://localhost