Vue 开发环境搭建

1 安装环境

Node.js

js的运行环境，相当于 java 的 jvm

官网：https://nodejs.org/en，下载最新稳定版 18.16.0 LTS，双击安装即可

自动安装了npm，终端验证：

C:UsersAdministrator>node -v v18.16.0 C:UsersAdministrator>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:UsersAdministrator>nvm -v 1.1.11 

环境变量在安装时已经自动创建

NVM_HOME=D:nvm NVM_SYMLINK=D:nodejs  # Path %NVM_HOME% %NVM_SYMLINK% 

修改配置 D:nvmsetting.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:WebStormProjectvue-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