码迷,mamicode.com
首页 > 其他好文 > 详细

vue-cli脚手架——3.0版本项目案例

时间:2019-07-20 17:23:09      阅读:408      评论:0      收藏:0      [点我收藏+]

标签:开发环境   als   javascrip   删除   影响   选项   sass安装   formatter   ken   

一、【准备工作】

node与git部分见vue-cli2.0搭建案例

vue-cli3.0是一个基于 Vue.js 进行快速开发的完整系统。有三个组件:

CLI@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令)

CLI 服务@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上(提供 如:servebuild 和 inspect 命令)

CLI 插件:给Vue 项目提供可选功能的 npm 包 (如: Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等)

全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它,否则vue -V查看依旧是2.x旧版:

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

vue-cli3.0需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+,你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本)

node -v  //查看版本

安装@vue/cli(vue-cli 3.0的包名称由 vue-cli 改成了 @vue/cli

cnpm install -g @vue/cli  //yarn global add @vue/cli
vue -V //查看版本,注意是大写V

vue-cli  >= 3 和旧版使用了相同的 vue 命令,所以 vue-cli  2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

二、【vue-cli3.0搭建项目】

(1)使用命令行搭建项目:

 1.搭建一个新项目,除最后两个,其他选项都是你此前保存的预设配置,其中插件安装选择列表:方向键选择(按 “空格键”选择/取消选择,A键全选/取消全选)

vue create my-pro-ui //文件名 不支持驼峰(含大写字母)

# OR //可视化页面搭建项目
vue ui
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel                            //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。                      
 ( ) TypeScript              // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人用
 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 ( ) Router                           // vue-router(vue路由)
 ( ) Vuex                             // vuex(vue的状态管理模式)
 ( ) CSS Pre-processors               // CSS 预处理器(如:less、sass)
 ( ) Linter / Formatter               // 代码风格检查和格式化(如:ESlint)
 ( ) Unit Testing                     // 单元测试(unit tests)
 ( ) E2E Testing                      // e2e(end to end) 测试

2.选择对应功能的具体工具包:是否使用history router + css预处理器 + ESLint + 2.0升级

手动配置案例:https://www.jianshu.com/p/6307c568832d

①是否使用history router:

技术图片

Vue-Router 利用了浏览器自身的hash 模式history 模式的特性来实现前端路由(通过调用浏览器提供的接口)

hash: 浏览器url址栏 中的 # 符号(如这个 URL:http://www.abc.com/#/hello,hash 的值为“ #/hello”),hash 不被包括在 HTTP 请求中(对后端完全没有影响),因此改变 hash 不会重新加载页面

history:利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法(需要特定浏览器支持)。单页客户端应用,history mode 需要后台配置支持(详细参见:https://router.vuejs.org/zh/guide/essentials/history-mode.html

② css预处理器:主要为css解决浏览器兼容、简化CSS代码 等问题(* Sass诞生于2007年,最早也是最成熟的一款CSS预处理器语言。

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> SCSS/SASS  //Sass安装需要Ruby环境,是在服务端处理的,SCSS 是 Sass3新语法(完全兼容 CSS3且继承Sass功能)
  LESS       //Less最终会通过编译处理输出css到浏览器,Less 既可以在客户端上运行,也可在服务端运行 (借助 Node.js)
  Stylus     //Stylus主要用来给Node项目进行CSS预处理支持,Stylus功能上更为强壮,和js联系更加紧密,可创建健壮的、动态的的CSS。

 ③ ESLint:

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier         //使用较多

④ 何时检测:

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save                    // 保存就检测
 ( ) Lint and fix on commit          // fix和commit时候检查

⑤ 单元测试 :

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai  //mocha灵活,只提供简单的测试结构,如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
  Jest          //安装配置简单,容易上手。内置Istanbul,可以查看到测试覆盖率,相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

⑥ 如何存放配置 :

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
  In package.json // 放package.json里

 ⑦ 是否保存本次配置(之后可以直接使用):

? Save this as a preset for future projects? (Y/n) // y:记录本次配置,然后需要你起个名; n:不记录本次配置

(2)使用图形化界面:

技术图片

 

技术图片

技术图片

 

 

技术图片

 技术图片

安装完成:你可以在这管理(安装、删除)插件、运行并分析你的项目文件

技术图片

 

 

参考:

https://cli.vuejs.org/zh/guide/installation.html

https://my.oschina.net/wangnian/blog/2051369

vue-cli脚手架——3.0版本项目案例

标签:开发环境   als   javascrip   删除   影响   选项   sass安装   formatter   ken   

原文地址:https://www.cnblogs.com/wheatCatcher/p/11217894.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!