VUE快速入门(跟随秦疆老师学习版)
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。为什么使用VUE用一种编程语言,为CSS添加一些编程的特性,最终生成CSS文件。SASS:基于Ruby,通过服务端处理,功能强大,效率高。LESS:基于NodeJS,通过客户端
Vue快速入门
一、简介
1.什么是vue
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
为什么使用VUE
- 轻量级, 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+,React压缩后44kb+)
- 移动优先。更适合移动端, 比如移动端的Touch事件
- 易上手,学习曲线平稳,文档齐全
- 集Angular(模块化) 和React(虚拟DOM) 的优点于一身, 并拥有自己独特的功能,如:计算属性
- 开源,社区活跃度高
- 官方文档:https://cn.vuejs.org/guide/introduction.html
- 参考https://blog.csdn.net/qq_45408390/article/details/118151297
- https://cloud.tencent.com/developer/article/1842043
2.css预处理器
用一种编程语言,为CSS添加一些编程的特性,最终生成CSS文件。
SASS:基于Ruby,通过服务端处理,功能强大,效率高。
LESS:基于NodeJS,通过客户端处理,功能少一点,效率低一点。但足够使用。
3.视图层
视图:html+css+js
网络通信:axios
页面跳转:vue-router
状态管理:vuex
vue-ui:ICE,.ElementUi
4.JavaScript框架
- jQuery:优化了DOM操作,但频繁操作DOM减低了性能。
- Angular:将后台的MVC模式搬到了前端并增加了模块化开发的理念。
- React:高性能的框架,在内存中模拟DOM操作的虚拟DOM,有效提升了前端的渲染效率。
- vue:渐进式JavaScript框架,渐进式就是逐步实现新特性。综合了Angular模块化和React虚拟DOM的优点。
- Axios:前端通信框架,也可以使用Ajax.
5.UI框架
- Ant-Disign:基于React的
- ElementUI:基于Vue(桌面端多)
- BootStrap:工具包
- AmazeUI:HTML5跨屏前端框架
- iView:基于Vue,组件比elementUI更丰富(移动端多)
- vue-element-admin
6.多包
- Hybrid APP
Hybrid App是指介于web-app、native-app这两者之间的 app ,它虽然看上去是一个Native App,但只有一个UI WebView,里面访问的是一个Web App,比如街旁网最开始的应用就是包了个客户端的壳,其实里面是HTML5的网页,后来才推出真正的原生应用。 - uni-app
uni-app(uni,读you ni,是统一的意思) 是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序、快应用等多个平台.
7.后端服务
- Express:NodeJS框架
- Koa:Express简化版
- NPM:项目综合管理工具,类似Maven
- YARN:NPM的替代,类似Maven与Grande
8.Vue是MVVM模式的实现者
- Model:模型层,在这里表示JavaScript 对象
- View:视图层,在这里表示 DOM (HTML操作的元素)
- ViewModel:连接视图和数据的中间件,Vue.js 就是 MVVM中的 ViewModel层的实现者,在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者
- ViewModel能够观察到数据的变化,并对视图对应的内容进行更新. ViewModel能够监听到视图的变化,并能够通知数据发生改变
Vue.js就是实现了DOM监听与数据绑定,是一个MVVM的实现者。
9.MVVM
MVVM源自于经典的MVC(Model-View-Controller)模式。MVVM的核心是ViewModel层,负责转换Model中的数据对象来让数据变得更容易管理和使用。
MVVM已经相当成熟了,主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js,Anfular JS
为什么使用MVVM模式
和MVC模式一样,目的是分离视图(View)和模型(Model)
优点:
-
低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
-
可复用:可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
-
独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewMode),设计人员可以专注于页面设计。
-
可测试:界面素来是比较难以测试的,而现在测试可以针对ViewModel来写。
结构图
-
View
View是视图层, 也就是用户界面。前端主要由HTH L和csS来构建, 为了更方便地展现vi eu to del或者Hodel层的数据, 已经产生了各种各样的前后端模板语言, 比如FreeMarker,Thyme leaf等等, 各大MV VM框架如Vue.js.Angular JS, EJS等也都有自己用来构建用户界面的内置模板语言。 -
Model
Model是指数据模型, 泛指后端进行的各种业务逻辑处理和数据操控, 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则 -
ViewModel
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层, 前端开发者对从后端获取的Model数据进行转换处理, 做二次封装, 以生成符合View层使用预期的视图数据模型。
View层展现的不是Model层的数据, 而是ViewModel的数据, 由ViewModel负责与Model层交互, 这就完全解耦了View层和Model层, 这个解耦是至关重要的, 它是前后端分离方案实施的重要一环。
MVVM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定, 以做到数据与视图的快速响应.
它可以类比成一个观察者,监测到了数据的变化,就立马更新页面与之绑定的值,无需更新页面,也无需操作DOM对象,相当于一个虚拟DOM对象.
二、第一个Vue程序
1.IDEA 安装Vue插件
file->setting->plugins->vue
导入vue
可以官网下载也可以cdn导入
<script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
<!--或-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
2.示例html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<div id="app2">
{{message}}
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"hello vue!",
}
});
var vm = new Vue({
el:"#app2",
data:{
message:"坏蛋阿土来了!"
}
});
</script>
</html>
三、Vue基础语法
1.V-bind(Attribute 绑定 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<div id="app2">
<span v-bind:title="message"><!--v-bind可以省略-->
悬停查看
</span>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"hello vue!",
}
});
var vm = new Vue({
el:"#app2",
data:{
message:"坏蛋阿土来了!"
}
});
</script>
</html>
v-bind等被称为指令。指令带有前缀v-,以表示它们是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的title特性和Vue 实例的message属性保持一致”。
2.v-if v-else(条件渲染)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h3 v-if="message">true</h3>
<h3 v-else>false</h3>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:true
}
});
</script>
</html>
或者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h3 v-if="message == 'a'">a</h3>
<h3 v-else-if="message == 'b'">b</h3>
<h3 v-else>false</h3>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"a"
}
});
</script>
</html>
3.v-for(列表渲染)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
items:[
{message:"坏蛋"},
{message:"阿土"}
]
}
});
</script>
</html>
支持使用可选的第二个参数表示当前项的位置索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="(item,index) in items">
{{index}}-{{item.message}}
</li>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
items:[
{message:"坏蛋"},
{message:"阿土"}
]
}
});
</script>
</html>
3.v-on 指令来监听 DOM 事件 (简写为 @)
使用 v-on 指令 (简写为 @) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。
方法定义在vue对象的methods属性中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="count++">加1</button>
<p>Count is: {{ count }}</p>
<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"坏蛋阿土",
count:0
},
methods: {
greet(event) {
// 方法中的 `this` 指向当前活跃的组件实例
alert(`Hello ${this.message}!`)
// `event` 是 DOM 原生事件
if (event) {
alert(event.target.tagName)
}
}
}
});
</script>
</html>
方法事件处理器会自动接收原生 DOM 事件并触发执行。在上面的例子中,我们能够通过被触发事件的 event.target.tagName 访问到该 DOM 元素。
4.v-model 指令来进行表单输入绑定
这个可以帮助我们理解数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li>文本类型的 input 和 textarea 元素会绑定 value property 并侦听 input 事件 </li>
<input type="text" v-model="msg1">{{msg1}}<br><hr>
<textarea name="" id="" cols="30" rows="10" v-model="msg2"></textarea>{{msg2}}<br><hr>
<li>"<input type="checkbox">" 和 "<input type="radio">" 会绑定 checked property 并侦听 change 事件</li>
<input type="radio" name="sex" value="nan" v-model="msg3">男
<input type="radio" name="sex" value="nv" v-model="msg3">女 选择了:{{msg3}}<br><hr>
<select v-model="msg4">
<option disabled value="">请选择</option>
<option>AMR</option>
<option>AK</option>
<option>type25</option>
</select>
{{msg4}}
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg1:"坏蛋阿土",
msg2:"huaidanatu",
msg3:"nan",
msg4:""
}
});
</script>
</html>
v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用data 选项来声明该初始值。
四、Vue组件
1.什么是组件
组件是可复用的Vue实例, 说白了就是一组可以重复使用的模板, 跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙,通常一个应用会以一棵嵌套的组件树的形式来组织。
例如,我们可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
2.当不使用构建步骤时
当不使用构建步骤时,一个 Vue 组件以一个包含 Vue 特定选项的 JavaScript 对象来定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<hdat v-for="item in items" v-bind:hd="item"></hdat>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("hdat",{
props:['hd'],
template:'<p>{{hd}}</p>'
})
new Vue({
el:"#app",
data:{
items:["java","python","c"]
}
});
</script>
- Vue.component():注册组件
- cvzhanshi:自定义组件的名字
- template:组件的模板
- v-for=“item in items”:遍历Vue实例中定义的名为items的数组,并创建同等数量的组件
- v-bind:course=“item”:将遍历的item项绑定到组件中props定义名为course属性上;= 号左边的course为props定义的属性名,右边的为item in items 中遍历的item项的值
3.当使用构建步骤时
当使用构建步骤时,我们一般会将 Vue 组件定义在一个单独的 .vue 文件中,这被叫做单文件组件 (简称 SFC):
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">You clicked me {{ count }} times.</button>
</template>
使用组件
要使用一个子组件,我们需要在父组件中导入它。假设我们把计数器组件放在了一个叫做 ButtonCounter.vue 的文件中,这个组件将会以默认导出的形式被暴露给外部。
<script>
import ButtonCounter from './ButtonCounter.vue'
export default {
components: {
ButtonCounter
}
}
</script>
<template>
<h1>Here is a child component!</h1>
<ButtonCounter />
</template>
若要将导入的组件暴露给模板,我们需要在 components 选项上注册它。这个组件将会以其注册时的名字作为模板中的标签名。
当然,我们也可以全局地注册一个组件,使得它在当前应用中的任何组件上都可以使用,而不需要额外再导入。关于组件的全局注册和局部注册两种方式的利弊
传递 props
Props 是一种特别的 attributes,你可以在组件上声明注册。要传递给博客文章组件一个标题,我们必须在组件的 props 列表上声明它。这里要用到 props 选项:
<!-- BlogPost.vue 子 -->
<script>
export default {
props: ['title']
}
</script>
<template>
<h4>{{ title }}</h4>
</template>
当一个值被传递给 prop 时,它将成为该组件实例上的一个属性。该属性的值可以像其他组件属性一样,在模板和组件的 this 上下文中访问。
一个组件可以有任意多的 props,默认情况下,所有 prop 都接受任意类型的值。
当一个 prop 被注册后,可以像这样以自定义 attribute 的形式传递数据给它
<BlogPost
v-for="post in posts"
:key="post.id"
:title="post.title"
/>
<script>
export default {
// ...
data() {
return {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
}
}
</script>
五、Axios异步通信
1.什么是Axios
Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API[JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
- Vue.js是一个视图层框架并且作者 严格准守SoC(关注度分离原则),所以Vue.js并不包含AJAX的通信功能, 为了解决通信问题, 作者单独开发了一个名为vue-resource的插件, 不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。
Axios 使用简单,包尺寸小且提供了易于扩展的接口。
测试数据
{
"name": "坏蛋阿土",
"url": "https://so.csdn.net/so/search?spm=1000.2115.3001.4498&q=%E5%9D%8F%E8%9B%8B%E9%98%BF%E5%9C%9F&t=&u=",
"page": 1,
"isNonProfit": true,
"address": {
"street": "黑龙洞",
"city": "黑龙山",
"country": "玉屏县"
},
"links": [
{
"name": "bilibili",
"url": "https://bilibili.com"
},
{
"name": "坏蛋阿土",
"url": "https://yupin.com"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--v-cloak 解决闪烁问题-->
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div>名字:{{info.name}}</div>
<div>地址:{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
<div>传送门:<a v-bind:href="info.url">点我</a> </div>
</div>
</body>
<!--引入vue,axios-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
//data: 前面用的data:是属性
data(){
return{
info:{
name:null,
address:{
country:null,
city:null,
street:null
},
url:null
}
}
},
mounted(){//钩子函数
axios.get('data.json').then(response=>(this.info=response.data));
}
});
</script>
</html>
- 在这里使用了v-bind将href的属性与Vue实例中的数据进行绑定
- 使用axios框架的get方法请求数据,将响应的数据赋值给了data方法中info属性。
- data中接收响应数据的属性的结构,须和json中响应回来的数据格式上对应匹配
六、Vue的生命周期
七、Vue的计算属性
计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数:简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<p>currentTime1:{{currentTime1()}}</p>
<p>currentTime2:{{currentTime2}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"坏蛋阿土"
},
methods:{
currentTime1(){
return Date.now();//返回一个时间戳
}
},
computed:{
currentTime2(){//计算属性:methods,computed方法名不能重名,重名之后,只会调用methods的方法
this.message;//这个数据刷新会重新计算
return Date.now();//返回一个时间戳
}
}
});
</script>
</html>
改变计算属性中的值,缓存清除,重新计算,否则,每次调用的都是缓存中的数据。可以减少计算带来的系统开销。
调用方法时,每次都需要讲行计算,既然有计算过程则必定产生系统开销,那那么可以考虑将结果不经常变化的缓存起来,采用计算属性可以很方便的做到这点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约系统开销。
八、内容分发(插槽slot)
在Vue.js中我们使用元素作为承载分发内容的出口,可以称其为插槽,可以应用在组合组件的场景中.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--里面的每一个标签都是一个插槽,插槽上插不同的组件,就是不同的东西,里面到底是什么全由组件决定,这就是一个架子-->
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :items="item" ></todo-items>
</todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component('todo',{
template:'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component('todo-title',{
props:['title'],
template:'<div>{{title}}</div>'
});
Vue.component("todo-items",{
props:["items"],
template:"<li>{{items}}</li>"
});
var vm = new Vue({
el:"#app",
data:{
title:"hdat",
todoItems:['很坏-','很坏/','很坏、']
}
});
</script>
</html>
里面的每一个标签都是一个插槽,插槽上插不同的组件,就是不同的东西,里面到底是什么全由组件决定,这就是一个架子
自定义事件
删除按钮是在组件中的,点击删除按钮删除对应的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--里面的每一个标签都是一个插槽,插槽上插不同的组件,就是不同的东西,里面到底是什么全由组件决定,这就是一个架子-->
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems" :items="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component('todo',{
template:'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component('todo-title',{
props:['title'],
template:'<div>{{title}}</div>'
});
//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component("todo-items",{
props:["items","index"],
template:"<li>{{index}}{{items}}<button @click='remove'>删除</button></li>",
methods: {
remove: function (index) {
this.$emit('remove',index);//自定义触发事件
}
}
});
var vm = new Vue({
el:"#app",
data:{
title:"hdat",
todoItems:['很坏-','很坏/','很坏、']
},
methods: {
removeItems: function (index) {
this.todoItems.splice(index,1);
}
}
});
</script>
</html>
九、vue-cli
vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板
预先定义好的目录结构及基础代码,就好比在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发更加的快速.
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
1.配置环境
下载安装node.js
确认是否安装成功:
- 在cmd中运行node -v命令,查看是否能够输出版本号
- 在cmd中运行npm -v命令,查看是否能够输出版本号
如果想要快
npm install cnpm -g
npm install --registry=https://registry.npm.taobao.org
第一个打包时可能会有问题,第二个每次都加麻烦
所以
安装vue-cli模块
cnpm install vue-cli-g
#测试是否安装成功
C:\Users\Administrator\AppData\Roaming\npm\node_modules
目录下会有vue-cli这个模块
#查看可以基于哪些模板创建vue应用程序
vue list
这里选择使用webpack,他会向下兼容ES5
vue-cli程序
打开项目文件夹。地址栏cmd
输入命令
vue init webpack myvue
现在选择的先选no,不安装
Project name:项目名称,默认回车即可
Project description:项目描述,默认回车即可
Author:项目作者,默认回车即可
Install vue-router:是否安装vue-router,选择n不安装(后期需要再手动添加)
Use ESLint to lint your code:是否使用ESLint做代码检查,选择n不安装(后期需要再手动添加)
Set up unit tests:单元测试相关,选择n不安装(后期需要再手动添加)
Setupe2etests with Nightwatch:单元测试相关,选择n不安装(后期需要再手动添加)
Should we run npm install for you after the,project has been created:创建完成后直接初始化,选择n,我们手动执行;运行结果
初始化并运行
切换到项目目录下
cd myvue
安装依赖环境
npm install
运行
npm run dev
2.webpack的使用
WebPack是一款模块加载器兼打包工具, 它能把各种资源, 如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用
npm install webpack -g
npm install webpack-cli -g
- entry:入口文件, 指定Web Pack用哪个文件作为项目的入口
- output:输出, 指定WebPack把处理完成的文件放置到指定路径
- module:模块, 用于处理各种类型的文件
- plugins:插件, 如:热更新、代码重用等
- resolve:设置路径指向
- watch:监听, 用于设置文件改动后直接打包
webpacl-config.js
module.exports = {
entry:"",
output:{
path:"",
filename:""
},
module:{
loaders:[
{test:/\.js$/,;\loade:""}
]
},
plugins:{},
resolve:{},
watch:true
}
执行命令
webpack
就会去找打包配置文件进行打包了
十、vue-router路由
安装vue-router
npm install vue-router --save-dev
报错解决:
npm install --legacy-peer-deps vue-router@3.5.2
vue与vue-router版本不兼容导致,第一条命令默认去安装最新的vue-router
如果在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功能
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
使用
编写组件
mian.vue
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "main"
}
</script>
<style scoped>
</style>
content.vue
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
配置路由
在src下新建目录router
新建index.js,为路由的配置文件
index.js
import Vue from'vue'
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter);
//配置导出
export default new VueRouter({
routes:[
{
//路由的路径
path:'/content',
name:'content',
//跳转的组件
component:Content
},
{
path:'/main',
name:'mian',
component:Main
}
]
});
在main.js中挂上路由配置
import Vue from 'vue'
import App from './App'
import router from "./router";//1.自动扫描包里面的路由配置
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//2.配置路由
components: { App },
template: '<App/>'
})
App.vue
<template>
<div id="app">
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-view></router-view>
</div>
</template>
<script>
import Content from './components/Content'
export default {
name: 'App',
components: {
Content
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
router-link和router-view都要有
十一、vue+elementUi
layui的layer弹窗和layDate 日期与时间组件很好
https://docsify.js.org/# 文档生成
scss
https://www.bilibili.com/video/BV1WX4y1K7Lf/
https://blog.csdn.net/dxy3166216191/article/details/84201759
十二、路由嵌套
未完待续…
更多推荐
所有评论(0)