使用vue-cli快速搭建 vue3.0项目

1.介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。

• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

• /cli-service)，该依赖：

  • 可升级；一个运行时依赖 (@vue
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。

• 一个丰富的官方插件集合，集成了前端生态中最好的工具。

• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

2.安装

如果安装过vue-cli (1.x 或 2.x)，可以先进行卸载

npm uninstall vue-cli -g

安装最新版本：

npm install -g @vue/cli

3.创建一个项目

vue create template-vue

1.选择手动配置

2.根据自己需求选中一下选项

>( ) TypeScript     // 支持使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support  // PWA 支持
 ( ) Router     // 支持 vue-router
 ( ) Vuex     // 支持 vuex
 ( ) CSS Pre-processors    // 支持 CSS 预处理器。
 ( ) Linter / Formatter    // 支持代码风格检查和格式化。
 ( ) Unit Testing    // 支持单元测试。
 ( ) E2E Testing

3. 选择vue版本

4.选择class-style、babel、路由模式、css预处理

是否使用Class风格装饰器？
即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}

使用Babel与TypeScript一起用于自动检测的填充

Use history mode for router? (Requires proper server setup for index fallback in production)
 // 路由使用history模式?(在生产环境中需要适当的服务器设置以备索引)

// 选择CSS预处理器（默认支持PostCSS，Autoprefixer和CSS模块）：
 > SCSS/SASS
 LESS
 Stylus

5.eslint校验以及校验时机（我先择保存的时候就进行校验）

tslint: typescript格式验证工具
eslint w...: 只进行报错提醒； 【选这个】
eslint + A...: 不严谨模式；
eslint + S...: 正常模式；
eslint + P...: 严格模式；

代码检查方式：我选择保存时检查

6.选择 Babel, PostCSS, ESLint 等自定义配置的存放位置（我选择在各自配置文件）

7.是否将以上配置 作为将来项目的预置吗？

好啦大家快去尝试vue3.0的搭建吧~

最后

如果你是前端工程师同学，对前端监控搭建感兴趣，欢迎试用体验【webfunny监控系统】。