1. Vue CLI理解

1.1 什么是Vue CLI

如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI

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

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

1.2 Vue CLI使用前提 - Node & Webpack

安装Node.js

可以直接在官方网站中下载安装

Node环境要求8.9以上或者更高版本

NPM

NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。后续我们会经常使用NPM来安装一些开发过程中依赖包。

CNPM安装

由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

npm install cnpm -g --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了

cnpm install [name]

Webpack

Vue.js官方脚手架工具就使用了webpack模板。webpack对所有的资源会压缩等优化操作,它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。

Webpack的全局安装

npm install webpack -g
1.3 安装Vue脚手架
//Vue CLI2
npm install -g vue-cli
//Vue ClI3
npm install -g @vue/cli
1.4 初始化项目
//Vue CLI2
vue init webpack my-project
//Vue CLI3
vue create my-project

注:当我们安装了Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。可以使用如下方式在安装Vue CLI3的基础上拉取2.x的模板。

2. Vue CLI2详解

2.1 初始化设置

2.2 Runtime-Compiler和Runtime-only的区别

简单总结

如果在之后的开发中你依然使用template,就需要选择Runtime-Compiler。如果你之后的开发中使用的是.vue文件夹开发,那么可以选择Runtime-only

render和template

使用Runtime-Compiler模式时

new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

使用Runtime-only模式时

new Vue({
el: '#app',
render: h => h(App)
})

为什么会出现这样的差异呢?我们需要先理解Vue应用程序是如何运行起来的,Vue中的模板如何最终渲染成真实DOM。我们来看下面的一幅图。

render函数的使用

//组件对象
const cpn = {
template: '<div>{{message}},我是cpn组件</div>',
data() {
return {
message:'hello'
}
}
} //这里传来的实参名字叫createElement,而模板生成使用形参h去接收,为什么要取名h?
new Vue({
el: '#app',
render: (createElement) => {
//1.使用方式一:我们这里创建出来的element就会替换#app元素
// return createElement('标签','相关数据对象(可以不传),即标签的属性',['内容数组']); //1.1 render函数基本使用
// return createElement('div',{class: 'box'},['polaris']); //1.2 嵌套render函数
// return createElement('div',{class: 'box'},[
// 'polaris',createElement('h2',['我是标题啊'])
// ]); //1.3 传入一个组件对象,注意这里的cpn组件需要template编译器
return createElement(cpn);
}
})

注意:vue-template-compiler会把.vue文件中的template转化成render函数,不需要使用template编译器了。(vue-template-compiler是什么请回看 Webpack详解)

2.3 目录结构

2.4 npm run build流程

2.5 npm run dev流程

2.6 修改配置:webpack.base.conf.js起别名
resolve: {
extensions: ['.js','.vue','.json'],
alias: {
'@': resolve('src'),
'pages': resolve('src/pages'),
'common': resolve('src/common'),
'components': resolve('src/components'),
'network': resolve('src/network'),
}
}

3. Vue CLI3详解

vue-cli 3 与 2 版本有很大区别

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

初始化

目录结构

vue-cli 3的配置文件放哪里去了?

注:在vue-cli3如果我们要修改配置,有三种方式

① 启动配置服务器: vue ui命令

② 在项目根目录下创建一个 vue.config.js文件,写的配置会和默认配置合并作为webpack配置。

③ 隐藏起来的配置:node_nodules/@vue/cli-service/lib/webpack.config.js

main.js理解

import Vue from 'vue'
import App from './App.vue' //生产阶段打印的一些提示信息,在开发阶段一般不需要即设为false
Vue.config.productionTip = false //两种不同的写法异同 ↓
new Vue({
//el与下面的.$mount('#app')没有区别
//vue底层只是多了一行代码,即如果配置了el则获取el的值去执行.$mount('得到的值')
//即不管有没有el,最终都会执行.$mount('xx')
el: '#app'
render: function(h) {
return h(App)
}
}) new Vue({
render: h => h(App),
}).$mount('#app')

六. Vue CLI详解的更多相关文章

  1. HTTP协议 (六) 状态码详解

    HTTP协议 (六) 状态码详解 HTTP状态码,我都是现查现用. 我以前记得几个常用的状态码,比如200,302,304,404, 503. 一般来说我也只需要了解这些常用的状态码就可以了.  如果 ...

  2. C++11 并发指南六(atomic 类型详解四 C 风格原子操作介绍)

    前面三篇文章<C++11 并发指南六(atomic 类型详解一 atomic_flag 介绍)>.<C++11 并发指南六( <atomic> 类型详解二 std::at ...

  3. C++11 并发指南六(atomic 类型详解三 std::atomic (续))

    C++11 并发指南六( <atomic> 类型详解二 std::atomic ) 介绍了基本的原子类型 std::atomic 的用法,本节我会给大家介绍C++11 标准库中的 std: ...

  4. C++11 并发指南六( <atomic> 类型详解二 std::atomic )

    C++11 并发指南六(atomic 类型详解一 atomic_flag 介绍)  一文介绍了 C++11 中最简单的原子类型 std::atomic_flag,但是 std::atomic_flag ...

  5. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  6. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  7. Vue.prototype详解

    参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...

  8. 小白进阶之Scrapy第六篇Scrapy-Redis详解(转)

    Scrapy-Redis 详解 通常我们在一个站站点进行采集的时候,如果是小站的话 我们使用scrapy本身就可以满足. 但是如果在面对一些比较大型的站点的时候,单个scrapy就显得力不从心了. 要 ...

  9. vue指令详解

    一.vue简绍 1. Vue.js是什么    Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...

随机推荐

  1. 用微信小程序做一个小电商 sku

    效果展示图 功能点概述 图一功能点有 搜索 轮播图 商品展示 图二功能点 导航栏 加入购物车 图四功能点 评论点 图五购物车 复选框 ( 全选全不选 ) 即点即改 总计结算 功能详解 1.A(搜索) ...

  2. php 之 excel导出导入合并

    <?php class Excel extends Controller { //直属高校 public function __construct() { parent::Controller( ...

  3. 家庭版window10找不到文件'gpedit.msc'。请确定文件名是否正确后 ,再试一次

    今天遇到电脑找不到gpedit.msc文件,所以记录一下这个问题的解决方法 1. 首先建立一个空白文档  代码如下: @echo off pushd "%~dp0" dir /b ...

  4. 日志切分神器--logrotate

    Blog:博客园 个人 概述 还在自己写定时切分日志的脚本?试试系统自带的logrotate工具吧! logrotate是一个日志文件管理工具.用于分割日志文件,删除旧的日志文件,并创建新的日志文件, ...

  5. fashion数据集训练

    下载数据集 fashion数据集总共有7万张28*28像素点的灰度图片和标签,涵盖十个分类:T恤.裤子.套头衫.连衣裙.外套.凉鞋.衬衫.运动鞋.包.靴子. 其中6万张用于训练,1万张用于测试. im ...

  6. CSS3之径向渐变

        设置最终形状参数: ellipse circle 设置长半轴和短半轴 设置椭圆对称中心 设置色标 输出代码: radial-gradient(circle closest-side at ce ...

  7. 七:Redis的持久化

    1.RDB(Redis DataBase) 1.1 定义:在指定的时间间隔内将内存中的数据集快照写入磁盘,也就是行话讲的snapshot快照,他恢复时是将快照文件直接读到内存里 是什么:Redis会单 ...

  8. MiniCat:手写Http服务器

    minicat 项目介绍 已实现http基础协议.参数接受.servlet.filter.cookie.多文件上传等.支持NIO. 一款轻量化Http服务器.支持bio.nio两种模式.归属Coody ...

  9. Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑

    一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...

  10. php 把一个数随机分成n份

    $money_total=100; $personal_num=10; $min_money=0.01; $money_right=$money_total; $randMoney=[]; for($ ...