cli是vue提供的一个用来快速构建项目环境的一个工具,底层使用的是webpack,webpack底层使用的是node.js。有cli2和cli3两个版本
安装
如何让一台电脑既可以使用vue-cli 2 也 可以使用 2以上版本?
vue -V 查看cli版本号
vue 查看是否安装成功,有东西输出表示安装成功。
npm vue dev
项目创建
cli2以上
创建: vue create 项目名
项目启动: npm run serve //开发环境启动。 npm run build //生产环境打包
创建: vue ui 图形化创建,根据提示点击就可以。
cli2
标准形式
简易形式,一般用于单个案例使用
创建: vue init webpack-simple 项目名称
cli2 和cli2以上版本比较
创建项目webapp
修改配置文件,新建文件 vue.config.js
const path = require('path')
module.exports = {
lintOnSave: process.env.NODE_ENV !== 'production',//禁用 eslint-loader
//设置路径别名
chainWebpack: config => {
config.resolve.alias
.set('@', path.join(__dirname, './src'))
.set('assets', path.join(__dirname, './src/assets'))
.set('components'.path.join(__dirname, './src/components'))
},
devServer: {
open: true, //项目启动时,自动打开网页
proxy: {
//标识符 ajax : 选取域名后的第一个路径作为标识符
'ajax': {
//target: 目标源 , 选择 协议 + 域名,会自动替换
target: 'http://m.maoyan.com',
changeOrigin: true
}
}
}
}
src文件夹下新建文件夹
layout 文件夹 ,
mock 文件夹 存放模拟数据文件。
router 文件夹 存放路由配置。
store 文件夹 存放状态管理 vuex 的配置文件。
utils 文件夹 存放项目公共封装库,比如封装的数据请求js文件。
views /pages文件夹 存放路由路径对应的组件。
原有文件说明
assets文件夹,存放自定义的css,js文件和图片
components 文件夹,在此文件夹中定义需要的组件
//Tab.vue表示一个组件文件,组件构成格式:
<template>
//组件模板
</template>
<script>
export default{
data(){},
}
</script>
//lang是语言,sass,less,stylus等
//scoped:给样式设置独立作用域,最后每个组件都加。
<style lang="less" scoped>
@import 'url'; //引入其他的less或css文件。
</style>
App.vue 文件 最大的组件 ,components文件夹中定义的小组件引入到layout文件夹的布局外壳中,布局外壳组件引入到此文件中
main.js 项目入口文件,最先执行的文件,其他文件都依赖这个文件执行.
// 所有要用的外部js文件(放在utils文件夹中的)都需要引入
//引入项目自适应文件 rem.js
import './utils/rem.js' // 直接执行
.eslintrc.js //注释掉此文件中的 @vue/standard
,可以禁用Eslint语法规范。
路由表打造 放在route文件夹中
创建路由模块
//引入模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import routerTable from './routes' //1.引入自定义路由表
Vue.use(VueRouter) //2.安装插件
//3. 创建路由表
//4.创建路由模块
const router=new VueRouter({
mode:'history', //选择vue路由模式为history
routes:routerTable //配置路由表
})
export default router //导出
创建路由表
//路由懒加载
const Film = () => import(/* webpackChunkName: "group-maoyan" */ '../views/film/index.vue')
const routeTable=[
{
path:'' , //路径
components:'' , //组件名
meta:{ include:"组件名"} //元信息
name:'', //路由名
children:[ //子路由
{
path:'' , //路径
components:'' , //组件名
...
},
{}
]
}
]
路由组件 放在views文件夹中
hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。 #/home
history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home
abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。【 这个模式不常用 】
hash/history 常用于浏览器端,abstract用于服务端
使用:
//需要安装和引入
$ yarn add vue-router //安装
//***********************************************
//在router文件夹中创建文件index.js,创建路由模块
// 1. 引入所需要模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import routerTable from './routes'
// 2. 安装插件
Vue.use( VueRouter )
// // 3. 创建路由表
// const routerTable = []
// 4. 创建路由模块
// const router = new VueRouter( options )
const router = new VueRouter({
mode: 'history',// 需要后端配置
routes: routerTable // 配置路由表
})
export default router
//******************************************
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//创建路由表routes.js
//路由懒加载
const Recommend = () => import(/* webpackChunkName: "group-maoyan" */ '../views/film/index.vue')
const routeTable=[
{
path: '/recommend', //路径
component: Recommend, //组件名
meta: {
include: 'Recommend' //元信息,添加后组件运行在后台,不显示在控制台vue中
},
children:[ //子路由
{
path:'Hot',
component:Hot,
name:'Hot', //给路由取名,组件中可以用name来访问
meta:{
include:'Hot'
}
},
]
},
{ //动态路由
path:'/lists/classify_list/:id',// 动态路由组件的配置
component:ClassList,
name:"ClassList",
meta:{
include:"ClassList"
}
},
]
export default routeTable
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//main.js中需要引入和注入路由
import router from './router' //引入路由模块
new Vue({
router:router, //为全局注入路由,我们会得到两个属性 $router $route
render: h => h(App),
}).$mount('#app')
//配置好子路由后,要在对应的一级路由组件中写子路由展示区
<!-- 子级路由展示区 -->
<keep-alive
:include="$route.meta.include"
>
<router-view></router-view>
</keep-alive>
$route 。
//将要传递的参数写在to中,接收页面通过 $route.query接收,params中的id属性是固定的。
//选择路由模式:如果你使用的是 hash , 那么a标签就可以了。如果是history模式,使用router-link代替a来实现页面跳转效果并传参。可以在router-link身上加一个keep-alive属性进行浏览器缓存。
<router-link
:to = "{
name: 'detail',
params: {
id: item.id
},
query: { ...item }
}"
>
$router
//$router原型下有很多的方法,比如 push,replace,go,back
//push,replace,进行页面跳转。
//区别:push会将我们操作放入历史记录,点击浏览器返回会一层一层返回。
// replace不会将我们的操作放入历史记录,点击浏览器返回反回2层。
//go 向前跳
//back 向后跳
this.$router.go(-1) //返回上一级
this.$router.push('/service')
this.$router.push({name,params,query})
//push/replace的参数就是to属性的参数
有时候组件加 @click不会触发,要加修饰符 @click.native
别名: 路由钩子,路由守卫
作用:对路由跳转进行拦截
类型:
全局导航守卫:对整个项目做控制
路由独享守卫:对单个路由的路由配置做控制,写在路由表中
组件内守卫:对组件对应的路由做控制
组件前置守卫:拦截组件的进入,在组件创建前执行,这时还没有组件,没有this。
beforeRouterEnter(to,from,next){
}
//数据预载
next(vm => { //vm指的就是组件
const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
vm.$set(vm.category,'categorys',result)
})
组件后置守卫:
beforeRouterLeave(to,from,next){}
组件更新守卫:专用于 动态路由
使用:
全局导航守卫:
全局前置守卫 :router.beforeEach(fn)
//fn有3个参数 : to【目标路由】,from【当前路由】,next【是否拦截,】
//使用场景:后台管理系统,社区app,做登录拦截
router.beforeEach(( to,from,next ) => {
console.log("西阁: to", to)
console.log("西阁: from", from)
// console.log("西阁: next", next)
// next( false )
// next() == next( true )
// next( true )
if ( to.path == '/home/hot' ) {
next()
}
const token = getCookie(' _token')
console.log('token',token)
if ( token || to.path == '/login') {
next()
} else {
next('/login')
}
全局后置守卫: router.beforeResolve(fn)
//没有拦截这一个功能,只有提示功能,建议不用.
全局更新守卫,【可忽略,用法和前置守卫一样】。不同点:更新守卫会遍历完整路由表后进行页面跳转,有一个不同就不跳转。前置守卫只要找到要跳转的页面就直接跳转,不继续遍历路由表。
//
安装: yarn add animate.css
在动画组件/元素外层 加Vue 内置组件 transition
<!-- 二级路由展示区域 -->
<keep-alive
:include="$route.meta.include"
>
<transition
mode = "out-in"
enter-active-class="animated slideInLeft"
leave-active-class="animated slideOutLeft"
>
<router-view></router-view>
</transition>
</keep-alive>
vuex称为vue的状态管理工具,也是多组件状态共享的工具。用一条数据去控制一个视图,这个数据就称之为状态。
vuex的好处:
使用场景:中大型应用开发。数据交互频繁。用户交互频繁。
vuex开发流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpHTLzcw-1578271314063)(C:\Users\17977\Desktop\vuex.png)]
vuex操作流程
插件,需要安装 yarn add vuex。
vuex简易版使用,用于单个案例,公司不常用。
//在store文件夹中定义index.js
import Vue from 'vue'
import Vuex from 'vuex'
import { //引入定义的常量
INCREMENT,
DECREMENT
} from './actionType'
Vue.use(Vuex)
//创建store模块
const store=new Vuex.Store({
//state存放数据
state:{
count:0
},
//action用来放方法
actions:{
//定义一个增加方法increment
increment(store,payload){
//参数:store 实例。payload负载,就是组件视图传来的数据,可有可无
//创建动作
const action={
type:INCREMENT, //type表示的是组件完成什么类型的动作,
payload
}
store.commit(action) //将创建的action动作发送给mutations
},
//定义一个减方法decrement
decrement(store,payload){
//创建并发送动作
store.commit({
type:DECREMENT,
payload
})
}
},
//mutations中存放修改state 数据的方法
mutations:{
//函数名对应的是actions中的INCREMENT动作类型
//上面是变量,此处是函数,加一个[]
[INCREMENT](state,action){
//参数:state是实例state,是一个对象。action就是actions中创建的动作,是一个对象
//此处进行修改数据
console.log('state',state)
console.log('action',action)
state.count+=action.payload
},
//
[DECREMENT](state,action){
state.count-=action.payload
}
}
})
export default store
需要在mian.js文件中全局注入vuex才能使用
//在组件中使用vuex
<script>
export default {
computed: {
count () {
//使用this.$store.state可以获取vuex中state定义的数据
return this.$store.state.count
}
},
mounted () {
console.log( this.$store )
},
methods: {
add () {
// 这里面触发actions中的方法
// this.$store.dispatch( vuex中actions里面方法的名称 )
this.$store.dispatch( 'increment',10 )
},
jian () {
this.$store.dispatch( 'decrement' )
}
}
}
</script>
vuex-数据分片写法,把store.js文件放在view文件夹中,再在store文件夹中引用
//view中的store.js文件
const ADD_TODOS="ADD_TODOS"
export default{
state:{
todos:[
{
id:1,
task:''
}
]
},
actions:{
},
mutations:{
}
}
//store文件夹 index.js文件
import Vuex from 'vuex'
import Vue from 'vue'
import recommendStore from './views/recommend/store.js'
Vue.use(Vuex)
const store=new Vuex.Store({
modules:{
recommendStore
}
})
export default store
//vuex提供了3个辅助工具,可以帮助简化在组件中使用的操作
import { mapState,mapActions } from 'vuex'
computed:{
//使用this.$store.state可以获取vuex中state定义的数据可以简化为:
...mapState({
todos:state=>state.recommendState.todos,
//其他数据。。。。
}),
methods:{
//执行actions中的方法可以简化为:
...mapActions(['addTodo','delTodo'])
}
}