【Vue-cli】
(一)什么是单页面应用程序
单页面应用程序。指的是一个web网站中只有唯一的一个html页面,所有的功能与交互都在这唯一的一个页面里完成。
(二)什么是vue-cli
vue-cli是vue.js开发的标准工具。
简化了程序员基于webpack创建工程化的vue项目的过程。
即程序员可以专注在撰写应用上,不必花费好几天去纠结webpack配置的问题。帮程序员快速创建一个vue项目
中国官网:https://cli.vuejs.org/zh/
(三)安装和使用
-
安装
在终端运行
npm install -g @vue/cli
vue-cli是npm 上的一个
全局包,使用npm install 命令,即可方便的把它女装到自己的电脑上。
-g :通过-g安装的都是全局包。
检测是否安装完毕:终端输入
vue -V ,出现版本号即安装成功。
-
基于 vue-cli 快速生成工程化的vue项目
终端
vue create 项目名
在进入目标文件夹之后在地址栏里面点击输入cmd,进入此文件夹下的终端。
输入vue create 项目名 ,回车
按照视频要求进行选择配置:
最终写一下保存设置的名字。我写的就是day3_01
最后回车等待建立
上面蓝色的提示,是在提示我们怎么把项目跑起来。
-
项目跑起来
根据上面提示在终端输入 。 窗口关掉即停止项目
cd demo-first
npm run serve
-
获得项目最外层基础结构
src 放源代码
· vue项目中src目录的构成:
assets 文件夹:存放项目中用到的静态资源文件(如css样式表、图片资源)
components 文件夹: 程序员封装的、可复用的组件,都要放到该目录下
main.js 是项目的入口文件,整个项目的运行,要先执行 main.js
App.vue 是项目的根组件……定义一些UI结构在页面上写什么结构就能看到什么结构<template></template>
(四)Vue项目的运行流程
在工程化项目中,vue要做的事情很单纯:通过main.js 把App.vue渲染到index.html 的指定区域中。
①App.vue用来编写待渲染的模板结构
②index.html中需要预留一个el区域
③main.js把App.vue渲染到了index.html所预留的区域中
关于main.js:
(五)组件的基本使用
-
创建一个Test.vue
-
套用模板结构填写内容
-
-
再在main.js中修改相应的内容
补充:.$mount('#app' ) 的作用与在实例中使用 el: 是同一个效果。二选一
【Vue 组件】
(一)什么是组件化开发
组件化开发指的是:根据封装的思想,把页面上可重用的UI结构封装为组件,从而方便项目的开发和维护。
组件是对UI结构的复用。
(二)vue中的组件化开发
vue是一个支持组件化开发的前端框架。
vue中规定:组件的后缀名是 .vue 。之前接触到的App.vue 文件本质上就是一个vue的组件。
(三)vue组建的三个组成部分
-
三个组成部分
每个 .vue 组件都由3部分构成,分别是:
① template -> 组件的
模板结构
② script -> 组件的
JavaScript行为
③ style -> 组件的
样式
注意:
· script当中的 export default {} 是默认导出,固定写法,不允许修改。
· .vue组件中的data 不能像之前一样,不能指向对象
·
组件中的data 必须是一个
函数
-
组件中的data
<script> //默认导出。这是固定写法! export default { //data数据源 data(){ //这个return出去的{}中,可以定义数据 return{ username: 'admin' } } } </script>
-
在组件中定义 methods 方法
<template>
<button @click="changeName">点击修改用户名</button>
</template>
<script>
//默认导出。这是固定写法!
export default {
//data数据源
data(){
return{
username: 'admin'
}
},
methods: {
changeName(){
this.username='哇哈哈'
}
}
}
</script>
实现效果
-
同理,要定义侦听器、过滤器、计算属性,则就与methods平级即可。
-
只有一个特殊,就是data函数
export default {
//data数据源
data(){
return{
username: 'admin'
}
},
methods: {
changeName(){
this.username='哇哈哈'
}
},
watch:{}, //当前组件中的侦听器
computed:{}, //当前组件中的计算属性
filters:{} //当前组件中的过滤器
}
-
模板结构一个根元素
❗如果在<template></template>中写上超过一个的<div>盒子,那么就会报错,如下
❗“Component template should contain exactly one root element.”
组件的模板结构中,应该包含一个根元素。
❗解决办法:就是再在外面套一个大的div
❗
小总结:以后一开始建立就建立<template><div></div></template>
-
启用less语法
<style lang="less"></style>