vue-cli3+技术栈实战完整笔记（一）

原创

已于 2022-03-18 19:50:40 修改 · 置顶 · 3.7k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2018-10-06 11:42:52 首次发布

本文详细介绍了基于vue-cli3.0创建项目的过程，包括项目文件结构解析、VSCode配置、路由操作、状态管理（vuex）、组件通信、ajax请求、以及vue中的一些实用技巧，如设置路由动画、动态设置页面标题等。

0. 基于vue ui创建vue cli3.0项目：参考：https://blog.youkuaiyun.com/qq_42231156/article/details/82343793。

1.项目文件vueCli3.0下：
   pulic文件下：favicon.ico是网址上方标题的的小图标。
   index.html：是入口文件。
   src：项目的主文件：
       assets：是存放静态资源（如，图片，css等）的文件。
img：存放图片文件。
      iconfont：图标字体文件。

css：存放公共css文件。

js：存放第三方js文件。
components：可复用的组件。
views：页面组件。
api：项目的ajax请求请求。
config：项目的配置文件。
index.js：配置地址，在需要的地方import config from "./config/index.js"引入配置对象即可。
directive：存放vue的自定义指令。
index.js：
lib：
tools.js：存放与业务无关的，纯粹的工具方法，如封装的通用js方法。
util.js：存放与业务结合有关的，如定义的路径变量。
router：存放路由有关的，将router.js移入该文件内。
index.js:：存放引入文件，配置路由实例。如下图：

import Vue from 'vue'
import Router from 'vue-router'
import routes from "./router.js"
import {setTitle} from "@/lib/util.js"
Vue.use(Router)
const router=new  Router({
	routes
})
const IS_LOGIN=true   //根据存储在cookie的登录信息判断是否登录的判断
router.beforeEach((to,form,next)=>{  //router实例的beforeEach方法是注册一个全局前置守卫，从from路由对象到to路由对象，即禁止在没有登录情况下，在网址栏输入admin会跳转到admin页面。
	to.meta && setTitle(to.meta.title)  //设置页面网址上面的标题
	if(to.name !=="login"){    //如果即将跳转的页面不是登录页面,如跳转的是admin页面
		if(IS_LOGIN) {   //根据是否已经登录，判断是否可以跳转到adminy页面
			next()      //如果已即登录，就直接跳转
		}else{
			next({name:'login'})    //如果没有登录，就跳转到登录页面
		} 
	}else{   //如果即将跳转的页面是登录页面
		next()
	}
})

router.beforeResolve((to,form,next)=>{  //router实例的beforeResolve方法是注册一个全局守卫，从from路由对象到to路由对象，即页面跳转前所有钩子执行完最后执行该函数 ，

})

router.afterEach((to,form)=>{  //router实例的afterEach方法是注册一个全局后置守卫，从from路由对象到to路由对象，即页面跳转之后执行，
	//loading=false
})

export default router

/**
 * 1. 导航被触发
 * 2. 在失活的组件（即将离开的页面组件）里调用离开守卫 beforeRouteLeave
 * 3. 调用全局的前置守卫 beforeEach
 * 4. 在重用的组件里调用 beforeRouteUpdate
 * 5. 调用路由独享的守卫 beforeEnter
 * 6. 解析异步路由组件
 * 7. 在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter
 * 8. 调用全局的解析守卫 beforeResolve
 * 9. 导航被确认
 * 10. 调用全局的后置守卫 afterEach
 * 11. 触发DOM更新
 * 12. 用创建好的实例调用beforeRouterEnter守卫里传给next的回调函数
 */

router.js:：单独存放处理路由文件，配置路由列表。如下图：

import Home from './views/Home.vue'
export default [
    {
      path: '/',
      alias:'/home_page',  //为路由取别名，即访问"/home_page"和访问"/"和通过name："home",访问的效果是一样的
      name: 'home',   
      component: Home,    //普通写法
      beforEnter:(to,from,next)=>{   //该组件独有的守卫
      	if(from.name="login"){
	      	alert("这是从登陆页面跳转过来的")
	    }else{
	      	alert("这不是从登陆页面跳转过来的")
	    }
	    next()   //一定要在最后执行next(),否则不会跳转
      }
    },
    {
      path: '/about',
      name: 'about',      
      component: () => import('./views/About.vue')  //这样写，有懒加载的作用，即该页面显示时才会加载。
    },
    {
   	  path: '/argu/:name',    //动态路由传参：高级写法，动态加载路由，name是参数
   	  props:true,             //表示允许组件props:{}中接受name参数值，然后可以直接渲染在页面,{
  
  {name}}，或者$route.params.name获取路由参数
      component: () => import('./views/Argu.vue')  
    },
     {
   	  path: '/parent',    //嵌套路由
      component: () => import( './views/Argu.vue'),
      children:[
	      {
	      	path:"child1",  //注意只有父级需要'/'
	      	component: () => import('./views/child1.vue'),
	      },
	      {
	      	path:"child2",
	      	component: () => import('./views/child2.vue'),
	      },
      ]
    },
    {
		path: '/name_router',   //命名视图
		components: {
		    default:() => import('./views/about.vue') ,   //如果<router-view/> 没有name属性值，默认对应该路由
		    email:() => import('./views/parent.vue') ,    //<router-view name="email"/> 对应该路由
		    tel:() => import('./views/argu.vue')       //<router-view tel="tel"/> 对应该路由
		} 
	},
	{
		path: '/home',    //重定向路由
		redirect:"/",   //3种重定向的方法
//		redirect:{
//		   name:"home1"
//		},
//		redirect:to =>{    //如根据参数确定跳转到哪个页面
////		console.log(to)
////		return "/"
//			return {
//				name:"home1"
//		    }
//		}
	
	},
	 {
   	  path: '/login',      	       
      component: () => import('./views/login.vue')  
    },
	{
		path:"*",   //404页面一定要写在最后，因为是从上到下匹配路由。
		component: () => import('./views/error404.vue'),
	}
  ]

store:：存放状态管理的文件。store.js移入到该文件内,修改为index.js。记得修改main.js的入口文件
index.js：
mutations.js：
getters.js：相当于计算属性，对state参数的计算
state.js:
actions.js:
mudels:存放模块文件。
user.js:如存放用户的登录信息
mock: 模拟返回的数据，在后台接口还么有完成，前端通过模拟数据。参考：Mock.js
vue.config.js：自定义设置文件的配置，如跨域请求地址，配置后台（相当于vue-cli3.0以下版本的build/serve-dev-serve.js文件），路径简写src为@，设置项目的基本路径。

2. vscode编译器的：添加配置编译器的文件：
   在src同级下.editorconfig:
       root=true
       [*] //表示该编译器配置针对所有文件
       charset=utf-8
       indent_style=tabs 缩进键
       indent-size=2 缩进的大小
   然后在编译器中安装editorConfig for VS Code，然后就可运行添加的配置编译器的文件了


3. router-link与router-view：router-link是封装了的a标签。router-view渲染路由视图,两者效果一样。
命名路由：即路由有name属性name: 'home',<router-link to="/about"></router-link> 相当于命名路由 <router-link :to="{name:'about'}"></router-link>。
3.1 配置路由列表的5种方法：

a.为路由取别名：

    import Home from './views/Home.vue'  //如果有 name: 'home',表示是命名路由。
    {
        path: '/',
        alias:'/home_page',  //取别名，即访问"/home_page"和访问"/"和通过name："home",访问的效果是一样的
        name: 'home',        //命名路由
        component: Home    //普通加载页面模块
    },        
b.页面懒加载页面模块：即该页面显示时才会加载。不需要像import Home from './views/Home.vue'一样提前加载。
    {
        path: '/about',
        name: 'about',
        component: () => import('./views/About.vue')  
    },
c.动态路由加载传参：动态加载路由，name是参数，{
  
  {$route.params.name}}调用参数name的值。
    {
        path: '/argu/:name',
        props:true,             //表示允许组件props:{}中接受name参数值，并直接渲染在页面{
  
  {name}}
        name: 'argu',
        component: () => import( './views/argu.vue')  
    },
d.嵌套路由： <div class="parent"> <router-view/> </div>  。
    {
       path: '/parent',    //嵌套路由
       component: () => import('./views/Argu.vue'),
       children:[
           {
               path:"child1",   //注意只有父级需要'/'
               component: () => import( './views/child1.vue'),
           },
           {
               path:"child2",
               component: