Vue学习----第四天_Vue cli(脚手架)【6.8】

最新推荐文章于 2020-06-13 11:19:34 发布
最新推荐文章于 2020-06-13 11:19:34 发布
阅读量451 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue vue.js 无监督学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43848802/article/details/106602449
版权

目录

一、Vue CLI
1.什么是Vue CLI

在这里插入图片描述

2.Vue CLI使用前提 node

在这里插入图片描述

3.Vue CLI使用前提 webpack

可查看上一篇内容Vue学习----第三天_webpack（学习webpack看这一篇就够了1.8w字）【6.7】
在这里插入图片描述

4.Vue CLI使用前提 webpack

在这里插入图片描述

二、Vue CLI2
1.Vue CLI2详解

在这里插入图片描述

2.目录结构向详解

在这里插入图片描述

3.runtime-compiler和runtime-only的区别

在这里插入图片描述

4.render和template

在runtime-only创建的项目中我们会发现vue实例中有render: h => h(App)
h在vue内部是一个createElement函数,createElement('标签'，{标签的属性}，['内容'])
在这里插入图片描述

5.render函数的使用

在这里插入图片描述
1、在runtime-only创建的项目中我们会发现vue实例中有render: h => h(App)
h在vue内部是一个createElement函数,createElement('标签'，{标签的属性}，['内容'])
2、如下一段代码：

new Vue({
	el: '#app',
	render: function(createElement) {
		// 1.传入普通标签元素
		// return createElement('h2',{class: 'box'},['hello world'])
		// 2.加入子组件
		// return createElement('h2',createElement('button',['按钮']))
		// 2.传入组件对象
		return createElement(cpm)
	}
})

注释1显示结果相当于：<h2 class="box">hello world</h2>
注释3显示结果相当于：引入cpn组件
3、.vue文件中的template是由插件vue-template-compiler处理

6.Vue程序运行过程★★★★★

如果是runtime-compiler运行过程为：render→virtual Dom→UI
runtime-only运行过程为：template→ast(抽象语法树)→render→vdom→UI
由运行过程可知：runtime-only性能更高、代码量也更少
在这里插入图片描述

7.npm run build和npm run dev运行过程

在这里插入图片描述
在这里插入图片描述

8.修改配置：webpack.base.conf.js起别名

在这里插入图片描述

三、Vue CLI3
1.认识Vue CLI3

在这里插入图片描述

2.Vue CLI3安装

在这里插入图片描述

3.Vue CLI3目录结构详解

在这里插入图片描述

4.Vue CLI3配置

在这里插入图片描述

内容持续更新中…
lvan学习笔记-文章内容仅个人观点
2020.6.8

lvan-ah
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli脚手架-bulid下的配置文件
08-27
Vue-cli脚手架bulid下的配置文件 Vue-cli脚手架bulid下的配置文件是Vue.js开发过程中的一部分，主要用于创建和配置Vue.js项目。通过学习和掌握这些配置文件，可以帮助开发者更好地理解Vue.js项目的结构和工作原理，...
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
我们有很多现有的vue-cli（3.x / 4.x）项目。 在生产中：基于webpack的vue-cli仍然是捆绑webapp的最佳实践（通过代码拆分，旧版浏览器的旧版构建）。 在开发中：即时启动服务器并通过闪电快速实现HMR很有趣。 ...
第三届VueConf将于2019年6月8日在上海举办，尤雨溪及多位Vue.js专家将出席
web前端推广
05-08 1303
由Vue.js官方联合w3ctech、前端圈联合举办的第三届VueConf定于2019年6月8日在上海举办。 大会网站：https://vue.w3ctech.com 本次大会邀请了Vue.js作者尤雨溪、Vue.js官方团队成员蒋豪群、快手前端架构师天翔、汇丰科技中国 投资银行部 首席技术顾问卢俊杰、Vue.js 团队成员，VuePress 维护者，蚂蚁金服高级前端工程师真山等出席本次大会...
vue-cli系列之vue-cli-service整体架构浅析
12-07
vue启动一个项目的时候，需要执行npm run serve，其中这个serve的内容就是vue-cli-service serve。可见，项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东（主要...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
vue-cli-plugin-multiple-page 一个基于 vue-cli 捆绑多个页面的插件。 与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请...
vue-cli-plugin-tailwind:Tailwind CSS的vue-cli插件
05-10
vue-cli-plugin-tailwind 一个将Tailwind CSS添加到您的vue-cli项目的插件。入门在您的vue-cli项目文件夹中，通过以下方式添加插件： vue add tailwind选择要生成的Tailwind配置： 无-不会创建一个配置文件。 如果...
Vue学习----第三天_webpack（学习webpack看这一篇就够了1.8w字）【6.7】
weixin_43848802的博客
06-07 3970
一、认识webpack 官方网址：https://www.webpackjs.com/ 1.什么是webpack webpack是一个前端模块化打包工具 2.前端模块化 3.和grunt/gulp打包工具的对比 grunt/gulp更强调的是自动化、定义一些任务 webpack更强调模块化 二、webpack安装 1.webpack安装 webpack为了正常运行，必须依赖node环境 node环境为了正常执行代码，必须依赖其包含的各种依赖的包 npm(node packages manager)包管
Vue学习----第七天_Vuex（详细梳理）【6.13】
weixin_43848802的博客
06-13 1045
目录一、认识Vuex1.Vuex是做什么的？2.Vuex管理什么状态①使用Vuex统一管理状态的好处 一、认识Vuex 1.Vuex是做什么的？ Vuex是实现组件全局转态（数据）管理的一种机制，可以方便的实现组件之间数据的共享 2.Vuex管理什么状态 一般情况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件中的私有数据，依旧存储在组件自身的data中即可 ①使用Vuex统一管理状态的好处 能够在Vuex中集中管理共享的数据，易于开发和后期维护 能够高效的实现组件之间的数据共享，提高开
Vue学习----第三天_模块化开发【6.4】
weixin_43848802的博客
06-04 440
一、为什么需要模块化 1.JavaScript原始功能
Vue学习----第三天_组件化开发【6.3】
weixin_43848802的博客
06-03 421
一、认识组件化 1、什么是组件化 2.Vue组件化思想 二、注册组件 1.注册组件的基本步骤 代码如下： <div id='app'> <my-cpn></my-cpn> </div> <script src='./js/vue.js'></script> <script> // 1.创建组件构造器对象 const cpnC = Vue.extend({ // 字符串语
Vue学习----第五天_Vue-Router（初步了解vue路由）【6.10】
weixin_43848802的博客
06-10 386
目录一、认识路由1、什么是路由2、什么前端渲染和后端渲染3、后端路由阶段4、前端路由阶段二、前端路由的规则1、URL的hash2、HTML5的history模式01.HTML5的history模式：pushState02.HTML5的history模式：replaceState03.HTML5的history模式：go三、Vue-router基础 一、认识路由 1、什么是路由 2、什么前端渲染和后端渲染 3、后端路由阶段 4、前端路由阶段 二、前端路由的规则 实现，路径改变，页面不刷新 1、UR
Vue学习----第二天_阶段案例【6.1】
weixin_43848802的博客
06-01 377
一、作业回顾，点击变色 代码如下： <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> .active {
Vue学习----第二天_ES6补充、事件监听【5.31】
weixin_43848802的博客
05-31 367
一、ES6补充 1.let/var 2.const的使用 修饰常量 注意一：一旦给const修饰的标识符被赋值之后，不能修改 const a = 'abc' a = 'cde' 注意二：在使用const定义标识符，必须先赋值 const name; 注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性 const obj = { name: 'why', age: 30, height: 1.88 } con
Vue学习---第二天_v-model【6.2】
weixin_43848802的博客
06-02 350
一、v-model基本使用 代码如下： <div id='app'> <input type="text" v-model="message">{{message}} </div> <script src='./js/vue.js'></script> <script> const app = new Vue({ el: '#app', data: { message
Vue学习----第一天【5.30】
weixin_43848802的博客
05-30 296
一、简单认识Vuejs 二、Vue.js安装 三、Vue初体验 1、Hello Vuejs <body> <!-- {{}} 为mustache语法 --> <div id="app"> <h2>{{message}}</h2> <h1>{{name}}</h1> </div> <div>{{message}}</div> <script s
Vue学习----第二天_绑定属性【5.30】
weixin_43848802的博客
05-30 261
本章为绑定属性 一、v-bind 1.v-bind介绍 2.v-bind基础 代码如下： <div id='app'> <!-- 错误写法：这里不可以写mustache语法 --> <!-- <img src="{{imgUrl}}" alt=""> --> <!-- 正确做法：使用v-bind指令 --> <img v-bind:src="imgUrl" alt=""> <a v-b
Vue学习----第二天_插值操作【5.30】
weixin_43848802的博客
05-30 225
本章为模板语法 一、自定义模板 方法一： 打开VSCODE编辑器，依次选择“文件 -> 首选项 -> 用户代码片段”，会出现搜索框 输入html，点击第一个html.json打开 { "Print to console": { "prefix": "vue", "body": [ "<!DOCTYPE html>", "<html lang='en'>", "", "<head>",
Vue学习----第二天_循环遍历【6.1】
weixin_43848802的博客
06-01 217
一、v-for使用 1.v-for遍历数组 代码如下： <div id='app'> <!-- 1.遍历过程中没有使用索引值(下标值) --> <ul> <li v-for="item in names">{{item}}</li> </ul> <!-- 2.遍历过程中，获取索引值 --> <ul> <li v-for="(item, ind
Vue学习----第二天_条件判断【6.1】
weixin_43848802的博客
06-01 189
一、v-if、v-else-if、v-else 1.v-if和v-else的使用 代码如下： <div id='app'> <div v-if="isShow"> <h2 v-if="true">为true显示</h2> </div> <div v-else>为false显示</div> </div> <script src='./js/vue.js'>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值