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

热门相关:恭喜你被逮捕了   重生当学神,又又又考第一了!   女友的妈妈4   修仙界最后的单纯   法医王妃不好当!