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 <demo@example.com>
? 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
3.4 打包及部署到nginx
cd projectdir
npm run build
dist目录下的文件拷贝到nginx的html目录下
运行nginx
访问
http://localhost