Vue运行时全解析 - VueCLI3上手（一）

Vue Runtime Full Analysis - VueCLI3 Get Start

VRFA: (Vue Runtime Full Analysis) 可以译作vue 运行时过程全面分析和解析，这个全面分析涉及到比较基础的或者复杂的重要前端概念和vue中的概念等。

注： 本篇是《Vue运行时全解析》系列文章的第一篇，首次发表于https://segmentfault.com，友善转载蟹蟹。

阅读本节你能学到什么

• 官方主推VueCLI3的原因
• CLI3的核心概念
• CLI3的安装
• CLI3简单创建一个项目
• Vue ui的使用介绍
• 使用CLI3按照旧版方式创建项目的方法
• 安装插件vuex,router方法
• 修改项目配置的方式
• 使用VueCLI3的serve命令 打开一个vue文件

VueCLI3 上手

根据官方核心开发者的说法，vue 升级到 3，他的脚手架应该也是这个 。

为什么要用 3 呢，官方核心维护者给了几个原因：

• Cannot upgrade via deps

  • vue cli 2 创建的项目，我们能升级的只有 vue, webpack 和 webapck 插件本身，而 webpack 和项目的配置文件（即 config 和 build 目录中的文件）无法通过依赖升级来改掉，而 webpack 和 vue-loader 一直在更新，其配置文件也需要随之升级，就成为一个问题

• Useless scripts checked into projects

  • 一些无用的脚本文件和资源文件，对写模板的人有用，但对使用的人来说都是无用的，所以需要去删除

• No ecosystem sharing

  • 没有一个生态系统的分享，没有插件系统，没有通用的 preset, 如果要调整需要从 templates-vuejs/ewebpack 项目 fork 自己的仓库进行更改并进行调整，但是这个与上游的同步就成为问题

Vue CLI的灵感来源

• poi

  • Zero config Rapid Prototyping 零配置快速原型开发
    With just a single JavaScript file you can instantly preview it in your browser. 你可以立即使用浏览器预览一个js文件的执行效果
  • Interactive Project Scaffolding 交互式项目脚手架
    Scaffold out a complete project with desired features in minutes. 分分钟你就可以通过脚手架生成一个自选功能的项目
  • Framework Agnostic 不偏爱特定框架
    Build with your favorite framework or vanilla JavaScript. 随你编译喜欢的框架或者js插件
  • Fully Extensible 全扩展
    A rich collection of official plugins integrating the best tools in the web ecosystem.
    A powerful plugin API for making your own plugins. web环境中有官方丰富的扩展作为最好的工具，并且有一个强大的插件接口，提供给你写自己的插件。

• neutrino

  • mozila:webpack-chain链式修改配置，更加优雅

核心概念 Core Concepts

• Scaffolding, not only templating // 脚手架，不仅仅是模板
• Zero Configuration // 借鉴 parcel
• Plugin-based // preset

安装和使用 Insatallation & Usage

yarn global add @vue/cli

# yarn 被推荐，大部分vue的开发的项目都使用yarn
# 快，缓存
vue create my-project
vue ui

注意

这里如果是 windows 环境，如果遇到问题尝试安装 yarn 包管理工具后选择包管理工具时选择 yarn。

yarn VS npm 的文章 http://web.jobbole.com/88459/

有问题可以 https://github.com/vuejs/vue-... 或者 https://forum.vuejs.org/latest

默认 preset 里面只带有 babel 和 eslint 插件

使用旧版

# 使用cli-init工具
npm install -g @vue/cli-init
vue init webpack my-project

引入 vuex, vue-router

# VueCLI3脚手架中默认是没有安装vuex和vue-router
vue add router
vue add vuex

定制化项目配置

// 项目根目录下新建 vue.config.js  
module.exports = {
    lintOnSave: false // 保存时检查格式，使用eslint
    crossorigin: 'anonymous' // htmlWebpackPlugin
    css: { // 对组件中css的配置
      modules: true
    },
    devServer: { // 对开发服务的设置
      // Various Dev Server settings
      host: '0.0.0.0', process.env.HOST
      port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
      open: true, // 自动调用默认浏览器打开
      https: false // 是否使用https, https使用node的一个内部默认的ca证书
    }
}

// 查看内置默认的项目配置需要使用 vue inspect命令

启动一个 vue 文件

vue serve template.vue

结束

本节主要介绍了下VueCLI3诞生的原因与初衷，以及想要达到的效果，并简单说明了使用VueCLI3脚手架工具生成一个项目。

附：更多内容请参考VueCLI核心维护者蒋豪群同学的VueCLI的公开课视频