Vue 开发环境搭建
1 安装环境
Node.js
js的运行环境，相当于 java 的 jvm
官网：https://nodejs.org/en，下载最新稳定版 18.16.0 LTS，双击安装即可
自动安装了npm，终端验证：
C:\Users\Administrator>node -v
v18.16.0
C:\Users\Administrator>npm -v
9.5.1
npm = node package manager，js 包的管理工具，相当于 java 的 maven
# 安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v
# 安装webpack
npm install webpack -g
webpack -v
# 安装vue-cli
npm install --global vue-cli
vue -V
NVM
nodejs version manage，Node.js 版本管理工具，相当于 git
下载地址：https://github.com/coreybutler/nvm-windows/releases
双击安装即可，验证：
C:\Users\Administrator>nvm -v
1.1.11
环境变量在安装时已经自动创建
NVM_HOME=D:\nvm
NVM_SYMLINK=D:\nodejs
# Path
%NVM_HOME%
%NVM_SYMLINK%
修改配置 D:\nvm\setting.txt
root: D:\nvm
path: D:\nodejs
# 新增4行，配置镜像
arch: 64
proxy: none
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
Chrome vue-devtools 插件
WebStorm
配置
Editor
Font
- Size：14
File and Code Template
- HTML File
<!-- Author: weiyupeng -->
<!-- DateTime: ${DATE} ${TIME} -->
- JavaScript File
/**
* @Author: weiyupeng
* @DateTime: ${DATE} ${TIME}
*
*/
- Vue Single File Component
<!-- Author: weiyupeng -->
<!-- DateTime: ${DATE} ${TIME} -->
Plugins
安装 Vue.js 插件
新建 Vue 项目
- 启用web-pack自动部署项目架构
PS Z:\WebStormProject\vue-study> vue init webpack
? Generate project in current directory? Yes
? Project name vue-study
? Project description vue study
? Author weiyupeng
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? 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
- package.json
{
"name": "vue-study",
"version": "1.0.0",
"description": "vue study",
"author": "weiyupeng",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
运行
npm run dev
# Your application is running here: http://localhost:8080
Vue 项目结构
├── build/ # webpack 配置文件；
│ └── ...
├── config/ # 与项目构建相关的常用的配置选项；
│ ├── index.js # 主配置文件
│ ├── dev.env.js # 开发环境变量
│ ├── prod.env.js # 生产环境变量
│ └── test.env.js # 测试环境变量
│
├── src/
│ ├── main.js # webpack 的入口文件；
│ ├── common/ # 存放项目共用的资源，如：常用的图片、图标，共用的组件、模块、样式，常量文件等等；
│ │ ├── assets/ # 存放项目共用的代码以外的资源，如：图片、图标、视频 等；
│ │ ├── components/ # 存放项目共用的组件，如：封装的导航条、选项卡等等； 备注：这里的存放的组件应该都是展示组件；
│ │ ├── network/ # 存放项目的网络模块，如：接口；
│ │ ├── compatible/ # 存放项目的兼容模块，如：适合App和微信各种接口的模块；
│ │ ├── extension/ # 存放已有类的扩展模块，如：对 Array 类型进行扩展的模块；
│ │ ├── libraries/ # 存放自己封装的或者引用的库；
│ │ ├── tools/ # 自己封装的一些工具
│ │ ├── constant.js # 存放js的常量；
│ │ ├── constant.scss # 存放scss的常量；
│ │ └── ...
│ └── app/ # 存放项目业务代码；
│ ├── App.vue # app 的根组件；
│ └── ...
│
├── static/ # 纯静态资源，该目录下的文件不会被webpack处理，该目录会被拷贝到输出目录下；
├── test/ # 测试
│ ├── unit/ # 单元测试
│ │ ├── specs/ # test spec files
│ │ ├── eslintrc # 专为单元测试配置的eslint配置文件
│ │ ├── index.js # 测试编译的入口文件
│ │ ├── jest.conf.js # Jest的配置文件
│ │ └── karma.conf.js # Karma的配置文件
│ │ └── setup.js # 在Jest之前运行的启动文件；
│ └── e2e/ # e2e 测试
│ ├── specs/ # test spec files
│ ├── custom-assertions/ # 自定义的断言
│ ├── runner.js # test runner 脚本
│ └── nightwatch.conf.js # test runner 的配置文件
├── .babelrc # babel 的配置文件
├── .editorconfig # 编辑器的配置文件；可配置如缩进、空格、制表类似的参数；
├── .eslintrc.js # eslint 的配置文件
├── .eslintignore # eslint 的忽略规则
├── .gitignore # git的忽略配置文件
├── .postcssrc.js # postcss 的配置文件
├── index.html # HTML模板
├── package.json # npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
└── README.md