03-Vue_Cli
1、什么是Vue CLI
CLI俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架,可以快速搭建Vue开发环境以及对应的webpack配置。
2、使用
2.1、安装淘淘镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm全称:Node Package Manager
2.2、webpack
全局安装(-g 表示全局)
npm install webpack -g
安装Vue脚手架
安装的是CLI3的版本,想按照Vue CLI2的方式初始化项目时不行
npm install -g @vue/cli
#初始化项目
vue create my-project
如果想用2版本的,可以全局安装一个桥接工具。
npm install -g @vue/cli-init
#使用,初始化
vue init webpack my-project
安装后出现的选项(需要注意的几点)
1、创建的文件夹名称,也会作为项目名称,不能包含大写字母等。
2、ESLint检测代码规范,一般去掉。
2.3、目录结构
build:webpack相关配置
node_modules:依赖的node相关模块
src:写核心代码的地方
.babelrc:ES代码相关转化配置
.editorconfig:项目文本相关配置
.gitignore:Git仓库忽略的文件夹配置
.postcsssrc.js:CSS相关转化的配置
2.4、Runtime-Compiler和Runtime-only的区别
如果在之后的开发中,你依然使用template,就需要选择Runtime-Compiler
如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only
2.5、render和template
Runtime-Compiler
new Vue({el:'#app',components:{App},template:'<App/>'})
Runtime-only
new Vue({el:'#app'},render:h => h(App))
2.6、Vue程序运行过程
template模块经过ast(抽象树语法)处理后,给函数去处理,最终形成UI
2.7、render函数
render:(createElement) ==>{
return createElement('字符串',[内容数组])
//函数使用
return createElement('字符串',{class:'box'})
//嵌套render函数
return createElement(['数组1',createElement('h2,'[数组])])
}
//传入组件对象
return createElement(cpn)
2.8、npm run build
先入口文件(build/build.js),config/index.js包含了一些配置信息,build/webpack.prod.conf经过build/utils计算资源的存放路径,生成cssLoaders用于加载.vue文件中的样式,styleLoaders用于加载不在.vue文件中的样式。
2.9、修改配置webpack.base.conf.js起别名
resolve:{
extensions:['.js']//省略的后缀名
alias:{
'@':resolve('src'),
'page':resolve('xxx')
}
}
3、Vue CLI3
与2版本的区别:3是基于webpack4打造,2是webpack3。3的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录。
vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化。
移除了static文件夹,新增了public文件夹,并且index.html移动到public中。
3.1、项目创建
npm install -g @vue/cli
#初始化项目
vue create my-project
或者直接用视图创建:vue ui
3.2、目录结构
piblic:相对于CLI2中的static目录
src:源代码
.browserslistrc:游览器相关支持情况
.babel.config.js:ES语法转换
4、vue-router
4.1、路由
路由就是通过互联的网络把信息从源地址传输到目的地址的活动。路由表本质上就是一个映射表, 决定了数据包的指向。
前端路由的核心:改变URL,但是页面不进行整体的刷新。
4.2、路由的规则
4.2.1、URL-hash
URL的hash也就是锚点(#)
通过直接赋值location.hash来改变href, 但是页面不发生刷新
localhost.href
“Ip:8080/xxx”
localhost.hash=’/’
4.2.2、history-5种模式
pushState()
history.pushState({’’,’/foo’})
history.go()
history.back() 等价于 history.go(-1)
history.forward() 则等价于 history.go(1)
4.3、vue-router基础点
三大框架都有自己的路由
Angular的ngRouter
React的ReactRouter
Vue的vue-router
4.3.1、使用
第一步:安装vue-router
npm install vue-router --save
第二步:在模块化工程中使用(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //注入插件
const routes=[] //定义路由
//创建router实例
const router = new VueRouter({routes})
//导出router实例
export default router
然后可以在main.js中挂载vue实例
import router from './router'
然后在加入new Vue({router})
注释:
<router-link to"/index">首页</router-link>
: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个标签。
: 该标签会根据当前的路径, 动态渲染出不同的组件。
在路由切换时, 切换的是挂载的组件, 其他内容不会发生改变。
redirect是重定向
4.3.2、html5的History模式
即跳转页面不修改链接
//创建router实例
const router = new VueRouter({router,mode:'history'})
4.3.3、router-link补充
tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个
- 元素, 而不是
replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称. -
4.3.4、修改linkActiveClass
作用是给router-link进行高亮设置,如果不想用默认的router-link-active类名,可以在router-link中写上active-class=“自定义的类名”,即可。
4.3.5、路由代码跳转
方法里面:this.$router.push('/index')
动态路由
{path:'/user/:id',component:User} //标签中引用 <h2>{{$router.params.id}}
4.3.6、路由懒加载
在打包构建应用时,js包会变得非常大,影响页面加载。那么把不同的路由组件分割成不同的代码块,被访问的时候才加载对应的组件,这样就高效了。
方式一:在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.(推荐)
const Home = () => import('../components/xx.vue')
方式二:结合Vue的异步组件和Webpack的代码分析
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
方式三:AMD写法
const About = resolve => require(['../components/About.vue'], resolve);
4.3.7、路由嵌套
实现嵌套路由有两个步骤:
创建对应的子组件, 并且在路由映射中配置对应的子路由.
在组件内部使用标签.children:[ {path:'add', component:Add } ]
4.3.8、传递参数
主要有两种:params和query
params: /router/:id 形成的路径 /router/123
query:query的key作为传递方式 ;形成的路径 /router?id=123
{path:'/xx'+123, //params形式 query:{id:'01',age:9}} //query形式
参数传递方式二:Js代码
App.vue文件导出的时候,4.3.9、获取参数:$route
获取参数通过$route对象获取的。因为路由对象会被注入到每个组件中,当路由切换时,路由对象会被更新。
r o u t e 和 route和 route和router是有区别
r o u t e r 为 V u e R o u t e r 实 例 , 想 要 导 航 到 不 同 U R L , 则 使 用 router为VueRouter实例,想要导航到不同URL,则使用 router为VueRouter实例,想要导航到不同URL,则使用router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等4.4、导航守卫
SPA应用:单页面应用
在一个SPA应用中, 如何改变网页的标题呢?
普通的方法是在vue文件中,通过mounted声明周期函数, 执行对应的代码进行修改,但页面多了,就不好修改了。推荐方法是导航守卫。
vue-router提供的导航守卫主要用来监听监听路由的进入和离开的。
vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发。我们可以利用beforeEach来完成标题的修改。
to: 即将要进入的目标的路由对象。
from: 当前导航即将要离开的路由对象。
next: 调用该方法后, 才能进入下一个钩子。(路由文件中) router.beforeEach((to,from,next)=>{ window.document.title=to.meta.title, next() } )
如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数。
上面我们使用的导航守卫, 被称之为全局守卫。4.5、keep-alive
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
它们有两个非常重要的属性:
include - 字符串或正则表达,只有匹配的组件会被缓存
exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存5、TabBar
1.如果在下方有一个单独的TabBar组件,你如何封装
自定义TabBar组件,在APP中使用
让TabBar出于底部,并且设置相关的样式
2.TabBar中显示的内容由外界决定
定义插槽
flex布局平分TabBar
3.自定义TabBarItem,可以传入 图片和文字
定义TabBarItem,并且定义两个插槽:图片、文字。
给两个插槽外层包装div,用于设置样式。
填充插槽,实现底部TabBar的效果
4.传入 高亮图片
定义另外一个插槽,插入active-icon的数据
定义一个变量isActive,通过v-show来决定是否显示对应的icon
5.TabBarItem绑定路由数据
安装路由:npm install vue-router —save
完成router/index.js的内容,以及创建对应的组件
main.js中注册router
APP中加入组件
6.点击item跳转到对应路由,并且动态决定isActive
监听item的点击,通过this. r o u t e r . r e p l a c e ( ) 替 换 路 由 路 径 通 过 t h i s . router.replace()替换路由路径 通过this. router.replace()替换路由路径通过this.route.path.indexOf(this.link) !== -1来判断是否是active
7.动态计算active样式
封装新的计算属性:this.isActive ? {‘color’: ‘red’} : {}