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

webfunny的小可爱 1年前 ⋅ 706 阅读
ad

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.是否将以上配置 作为将来项目的预置吗?

 

 

 

关于Webfunny

Webfunny专注于前端监控系统,前端埋点系统的研发。 致力于帮助开发者快速定位问题,帮助企业用数据驱动业务,实现业务数据的快速增长。支持H5/Web/PC前端、微信小程序、支付宝小程序、UniApp和Taro等跨平台框架。实时监控前端网页、前端数据分析、错误统计分析监控和BUG预警,第一时间报警,快速修复BUG!支持私有化部署,Docker容器化部署,可支持千万级PV的日活量!

  点赞 0   收藏 0
  • webfunny的小可爱
    共发布1篇文章 获得0个收藏
全部评论: 0