vue-cli4介绍

vue-cli介绍

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

安装vue-cli4

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue --version  //查看版本

vue create hello-world //创建一个项目

安装和vue-cli3.0的是一模一样的,对比了一下3.0的脚手架,除了目录发生变化一些,其他的都一样

** 安装步骤和vue-cli3.0的一模一样**

1.创建项目

vue create project-name

default 是 使用默认配置

Manually select features 是 自定义配置

2.选择配置(自定义配置)

3.选择css预编译,这里我选择SCSS

4. 语法检测工具,这里我选择ESLint + Prettier

5.选择语法检查方式,这里我选择保存就检测

6.接下来会问你把babel,postcss,eslint这些配置文件放哪,这里随便选,

7.键入N不记录,如果键入Y需要输入保存名字

8.项目创建好后

cd project-name // 进入项目根目录

npm run serve // 运行项目

vue-cli3 新增

关于安装

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli

npm install -g @vue/cli

安装完成后查看版本
vue --V

项目创建

关于项目创建,除了命令创建3.x还增加了图形化界面创建以及管理vue项目
在创建新项目时还可以混合选用多种集成

  • TypeScript
  • PWA
  • Vue Router & Vuex
  • ESLint / TSLint / Prettier
  • 用 Jest 或 Mocha 进行单元测试
  • 用 Cypress 或者 Nightwatch 进行 E2E 测试

使用命令创建

命令:vue create vueapp

1、使用上下箭头选择默认设置还是手动选择功能

Vue CLI v3.0.3
? Please pick a preset:
  default (babel, eslint)
> Manually select features

2、按空格键选择你需要的功能,选完后按回车

babel:javascript转译器,将最新版的js语法(es6、es7)转换为现阶段浏览器可以兼容的js代码
typescript:使用 TypeScript 书写源码
PWA:渐进式WEB应用
Router:使用vue-router
Vuex:使用vuex
CSS Pre-processors:css预处理器
Linter / Formatter:代码规范标准
Unit Testing:单元测试
E2E Testing:e2e测试
Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

3、router是否使用history模式,history需要服务器支持详,情请看这儿https://router.vuejs.org/zh/guide/essentials/history-mode.html
这里我就选no

4、css预处理器的选择,我习惯用sass

5、代码格式化检测选择,我用的是ide是vscode个人感觉搭配插件用着很舒服,所以我选Prettier

6、是否保存刚才的配置,下一次就不用重新配置了,我就直接回车

7、关于Babel, PostCSS, ESLint, etc.这些配置文件你是想放在package.json里面还是单独放在外面
编辑器一般默认会在项目根目录下寻找配置文件,这里我就直接回车选择In dedicated config files

8、是否保存为未来项目的预配置吗,我也是直接回车

最后配置如下

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes

图形化界面

图形化操作非常方便,我就不一步步演示了,主要懒得贴图 (°ー°〃)

执行npm命令
vue ui
访问 http://localhost:8000 你就可以创建,管理,导入项目

实用新功能

  • node_modules
  • public
  • src
  • .browserslistrc
  • .eslintrc.js
  • .gitignore
  • babel.config.js
  • package.json
  • postcss.config.js
  • README.md

以上是项目根目录,3.x对比2.x文件结构明显精简了不少,多了一个public文件夹用于存放静态文件少了config、build等一系列的配置文件,这些配置文件都被放在了node_modules@vue文件下

browserslist

根目录中多了一个.browserslist文件,可以指定项目的目标浏览器的范围
用于转译的 JavaScript 特性和添加CSS 浏览器前缀,可以减少兼容代码提高代码质量
如果想少一个文件,你也可以在package.json中添加browserslist字段,参数是一个数组

这是默认设置,兼容所有最新版本,不支持ie8以下
> 1%
last 2 versions
not ie <= 8

使用 npx browserslist 可以查看项目的浏览器兼容情况
将需要支持的目标浏览器参数放在文件中就好

参数说明
> 1%全球超过1%人使用的浏览器
> 5% in US使用美国使用情况统计,接受两个字母的国家/地区代码
> 5% in my stats使用自定义使用数据
last 2 versions所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox ESR火狐最新版本
Firefox > 20指定版本范围
not ie <=8方向排除部分版本
Firefox 12.1指定浏览器版本
since 20132013年之后发布的所有版本

更多请查看官方文档

vue-cli服务

在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。
你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令
Vue CLI 项目有三个模式: development 模式用于启动,production 模式用于打包和e2e测试,test 模式用于unit测试

启动
serve:vue-cli-service serve

  --open    在服务器启动时打开浏览器

  --copy    在服务器启动时将 URL 复制到剪切版

  --mode    指定环境模式 (默认值:development)

  --host    指定 host (默认值:0.0.0.0)

  --port    指定 port (默认值:8080)

  --https   使用 https (默认值:false)

打包
build:vue-cli-service build

  --modern 使用现代模式构建应用,为现代浏览器交付原生支持的 ES2015 代码,并生成一个兼容老浏览器的包用来自动回退。

  --target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。

  --report 和 --report-json 会根据构建统计生成报告,它会帮助你分析包中包含的模块们的大小

测试
 test: vue-cli-service test:e2e  端到端测试
         vue-cli-service test:unit  单元测试

现代模式

为了兼容那些不支持js新特性的浏览器我们需要Babel转译,但转译后的代码笨重冗长,这次3.x提供了一个现代模式

npx vue-cli-service build --modern

这个命令会产生两个应用的版本:一个现代版的包,面向支持 ES modules 的现代浏览器,另一个旧版的包,面向不支持的旧浏览器
而且不需要我们手动去部署和设置什么,简直很贴心

  • 现代版的包会通过 <script type="module"> 在被支持的浏览器中加载;它们还会使用 <link rel="modulepreload"> 进行预加载
  • 旧版的包会通过 <script nomodule> 加载,并会被支持 ES modules 的浏览器忽略
  • 一个针对 Safari 10 中 <script nomodule> 的修复会被自动注入

插件的添加

在一个已经被创建好的项目中安装一个插件,使用vue add命令

CLI 插件安装

每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件
对于这种cli插件需要加入@vue的前缀,这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint,然后从 npm 安装它,调用它的生成器

插件添加
vue add @vue/eslint

向被安装的插件传递生成器选项 (这样做会跳过命令提示)
vue add @vue/eslint --config airbnb --lintOn save

第三方插件安装

安装并调用 vue-cli-plugin-apollo,不带 @vue 前缀,该命令会换作解析一个 unscoped 的包
执行此命令后src里会创建一个plugins文件夹,里面会自动生成关于插件的配置文件
vue add axios

基于一个指定的 scope 使用第三方插件,如果一个插件名为 @foo/vue-cli-plugin-bar,你可以这样添加它:
vue add @foo/bar

配置修改

例:向所有 Sass 样式传入共享的全局变量
在根目录新建一个vue.config.js,加入以下配置

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}

打包后路径问题

在vue.config.js文件中加入’baseUrl: ‘./”

module.exports = {
    //...
    baseUrl: './'
    //...
}

虽然官方说这个文件会被 @vue/cli-service 自动加载,但如果你启动项目用的是npm run serve,那么你最好使用npx vue-cli-service serve重启一下

发表评论

电子邮件地址不会被公开。 必填项已用*标注