了解 Vue CLI

Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置,做到开箱即用。

为什么要使用 vuecli

  • 使用 Vue.js 开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
  • 如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。

什么是 CLI

  • CLI 是 Command-Line Interface,翻译为命令行界面,但是俗称脚手架
  • Vue CLI 是一个官方发布 vue.js 项目脚手架
  • 使用vue-cli 可以快速搭建 vue 开发环境以及对应的 webpack 配置

安装 Vue 脚手架 最新版

npm install -g @vue/cli
  • vue -V 查看版本, 4.5.1

一个很有意思的是:“因此我们认为,相比局限的命令行界面,一个成熟的 GUI 更能帮助你发掘这些新特性,搜索和安装 vue-cli 插件,解锁更多可能。总的来说, vue-cli 不仅能让你轻松启动新项目,并且在后续的工作中仍会是你的得力助手。” vue ui 是 vue 提供的一套 GUI ,安装脚手架自带。嗯, 挺意外的

使用脚手架创建项目

vue cli2 使用

拉取 Vue Cli2 版本

npm install -g @vue/cli-init

创建一个项目

vue init webpack projectName 

执行创建项目时的指令 使用过程

执行完成后生成的目录:目录结构

创建项目时 Vue build 选项 4 详细介绍

?Vue build(Use arrow keys) 他会有两个选项

Runtime Compiler: recommended for most users

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ...

之前在 webpack 配置 vue 里面提到过 Vue 有多不同的版本,构建(?)时产生的效果会不同

Runtime+Compiler 和 Runtime-only 的不同

生成的入口文件 src/main.js : 入口

Tips: 入口文件中 new Vue()的 template 的内容会替换 el 所绑定的元素节点.

Vue 程序的运行过程: 图示

渲染过程:

Runtime+Compiler : template -> ast -> render -> virtual dom -> UI(DOM)

Runtime-only: render -> virtual dom -> UI(DOM)

结论:

  1. Runtime+Compiler 比 Runtime-only 的性能更高
  2. Runtime-only 的代码量更少 about 6KB lighter
将现有 Runtime+Compiler 改写为 Runtime-only 的形式
new Vue({
  el: '#app',
  // template: <App/>
  // components:  App
  render: function (createelement) {

    /**createelement === h 创建元素

     * 1. createelement(标签,标签的属性, ['内容'], createelement(... 子元素)
     *    return createelement('h2', {class: 'box'}, ['hello world'])
     * 2. 传入组件对象
     *    return createelement(App)
     */
    return createelement(App)
  }
})

Runtime-only 是由 vue-template-compiler处理了 template 依赖

CLI 最新版的使用

创建一个项目:

vue create my-project
# OR
vue ui

vue-cli3 与 2 版本有很大区別

  • vue-cli3 是基于 webpack4 打造, vue-ci2 还是 webpack3
  • wue-cli3 的设计原则是“0 配置”,移除的配置文件根目录下的, build 和 configs 等目录
  • vue-cli3 提供了 vue ui 命令,提供了可视化配置,更加人性化
  • 移除了 static 文件夹,新增了 public 文件夹,并且 index.html 移动到 public 中

vue-cli4 目前最新版本

Vue CLI >= 3 和旧版使用了相同的 vue 命令, 对比 3.0 的脚手架,除了目录发生变化一些,其他的都一样。主要变化

执行创建项目时的指令 使用过程

配置文件的查看和修改 通过 vue ui 导入当前目录文件进行操作。也可以直接通过此创建项目

在项目根目录下 创建文件 vue.config.js 可以手动更改配置文件

// /vue.config.js
module.exports = {}

相关推荐:

来自系列:Vue 笔记

分类 前端下文章:

微信小程序开发 days1 关注点:文件结构,json配置文件, 模板语法

小程序开发学习笔记 days2。 关注点:view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox

小程序学习笔记 days3。 关注点:生命周期,自定义组件

小程序学习笔记 days4。 关注点:scroll-view, Promise

css3 选择器,背景定义(定位), 盒子定位,弹性布局,栅格系统。还有一些常用的 css 属性。

更多...

评论([[comments.sum]])

发表

加载更多([[item.son.length-2]])...

发表

2020-11 By chuan.

Python-flask & bootstrap-flask

图片外链来自:fghrsh

互联网ICP备案号:蜀ICP备2020031846号