node版本要求node>=8.9以上(推荐 8.11.0+)
使用以下命令查看node版本
node -v
如果不是最新的请到node下载下载最新版本安装即可。
(1)若已全局安装vue-cli (1.x 或 2.x),需先卸载
npm uninstall vue-cli -g
(2)全局安装 vue-cli3.0
npm install -g @vue/cli
(1)创建项目
vue create 项目名
(2)配置
// 默认预设配置 babel, eslint
default (babel, eslint)
// 手动选择配置
Manually select features
(3)手动选择配置项目
Vue CLI v3.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support //支持渐进式网页应用程序
( ) Router //路由管理器
( ) Vuex //状态管理模式(构建一个中大型单页应用时)
( ) CSS Pre-processors //css预处理
(*) Linter / Formatter //代码风格、格式校验
( ) Unit Testing // 单元测试
( ) E2E Testing // 即端对端测试
(4)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预处理
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
// 4、Linter / Formatter 代码风格、格式校验
> TSLint
// 仅错误预防
ESLint with error prevention only
// Airbnb配置
ESLint + Airbnb config
// 标准配置
ESLint + Standard config
// Prettier配置(常用)
ESLint + Prettier
// 5、选择lint方式:Pick additional lint features
// 保存时检查(常用)
(*) Lint on save
// 提交时检查
( ) Lint and fix on commit
// 6、Unit Testing 单元测试
Mocha + Chai
Jest
// 7、E2E Testing E2E(End To End)即端对端测试
Cypress (Chrome only)
Nightwatch (Selenium-based)
// 8、选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
// 在单独的配置文件中
In dedicated config files
// 在package.json
In package.json
// 9、将此作为将来项目的预置吗?
Save this as a preset for future projects?
// 在单独的配置文件中
In dedicated config files
// 在package.json
In package.json
// 10、按下enter构建项目
// 1、进入项目
cd 项目名
// 2、运行
npm run serve
手机扫一扫
移动阅读更方便
你可能感兴趣的文章