一. 若已全局安装vue-cli (1.x 或 2.x),需先卸载
npm uninstall vue-cli -g
二. 全局安装 vue-cli3.0
npm install -g @vue/cli
三. node版本要求 Node >=8.9,可以使用 nvm 管理多个 Node 版本。
- 安装nvm https://github.com/coreybutler/nvm-windows/releases
- 安装
node
–>nvm install 版本号 window系统位数
- 显示所有安装的版本
nvm ls
- 切换node版本
nvm use 版本号
四.创建项目
vue create 项目名
1. 进入功能配置选择
(1. default (babel, eslint) 默认预设配置 babel, eslint(2. Manually select features 手动选择配置
5. enter
后,进入手动选择配置 ,有以下Installed CLI Plugins
选项(注:空格
单选,a
全选,i
反向全选)
(1. babel
(2. TypeScript
(3. Progressive Web App (PWA) Support 支持渐进式网页应用程序
(4. Router 路由管理器
(5. Vuex 状态管理模式(构建一个中大型单页应用时)
(6. CSS Pre-processors css预处理
(7. Linter / Formatter 代码风格、格式校验
(8. Unit Testing 单元测试
(9. E2E Testing E2E(End To End)即端对端测试
6. enter
后,Installed CLI Plugins
配置细节
(1 TypeScript
是否使用class风格的组件语法:Use class-style component syntax?
是否使用babel做转义:Use Babel alongside TypeScript for auto-detected polyfills?
(2. Router 路由管理器
路由使用历史模式:Use history mode for router? (Requires proper server setup for index fallback in production)
(3. CSS Pre-processors css预处理
选择CSS 预处理类型:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
选项:LessSassStylus
(4. Linter / Formatter 代码风格、格式校验
选择Linter / Formatter类型:Pick a linter / formatter config:
选项:TSLintESLint with error prevention only 仅错误预防ESLint + Airbnb config Airbnb配置ESLint + Standard config 标准配置ESLint + Prettier
选择lint方式:Pick additional lint features
选项:Lint on save 保存时检查Lint and fix on commit 提交时检查
(5. Unit Testing 单元测试
选择unit testing类型:Pick a unit testing solution: (Use arrow keys)
选项:Mocha + Chai Jest
(6. E2E Testing E2E(End To End)即端对端测试
选择E2E testing类型:Pick a E2E testing solution: (Use arrow keys)
选项:Cypress (Chrome only) Nightwatch (Selenium-based)
(7. 选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?选项:In dedicated config files 在专用的配置文件中In package.json 在package.json
(8. 将此作为将来项目的预置吗?
Save this as a preset for future projects?选项:In dedicated config files 在专用的配置文件中In package.json 在package.json
(9.保存预设为
Save preset as:
(10.回车后开始构建
五.项目启动
1.进入目录
cd ydc-vue3
2.运行
npm run serve
3.运行地址
App running at:- Local: http://localhost:8080/- Network: http://192.168.1.90:8080/