Vue系列---Vue-cli3

最新推荐文章于 2024-05-16 21:57:00 发布

hyduan200

最新推荐文章于 2024-05-16 21:57:00 发布

阅读量186

点赞数 2

分类专栏： vue 文章标签： Vue系列---Vue-cli3

本文链接：https://blog.csdn.net/duanhy_love/article/details/103129688

版权

vue 专栏收录该内容

40 篇文章 7 订阅

订阅专栏

vue_cli3 配置

什么是Vue_cli3

官方推荐的基于webpack搭建的比较健壮的开发模板,内置常用模(Vue,router,vuex,babel...),使我们快速上手开发
实战开发模板

- 安装

cnpm i -g @vue/cli@4.0.5  //全局安装初始化工具
vue -V //版本号安装成功
vue create xxxx  //创建项目

- 启动项目

//scripts
//npm run serve
//npm run build

vue-config.js

var path=require("path");
var webpack=require("webpack");
function resolve(dir){
    return path.join(__dirname,dir);
}

module.exports = {
 // 静态资源配置相对绝对路径  
  publicPath: "./",  //默认不写绝对路径
   //配置代理
  devServer: {
    host: "0.0.0.0",
    port: 8899,
    proxy: {
      "/apis": {
        target: "https://cnodejs.org",
        changeOrigin: true,
        pathRewrite: {
          "^/apis": ""
        }
      }
    }
  },
  //设置别名
  chainWebpack:config=>{
    config.resolve.alias.set("@",resolve("src"));
  },
  //设置插件  
  configureWebpack:{
      plugins:[
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
      ]
  },
   //设置全局sass
  css: {
      loaderOptions: {
          sass: {
              prependData:`
				@import "~@/assets/css/index.scss"	
			`
          }
      }
  }  
};

- 路由

模板使用 cnpm i vue-router@3.0.0 -S 解决重复点击同一路由警告问题

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("@/views/Home.vue"),
    children: [
      { path: "index", component: () => import("@/components/index.vue") },
      {
        path: "list",
        component: () => import("@/components/list.vue"),
        children: [
          { path: "one", component: () => import("@/components/one.vue") }
        ]
      },
      { path: "test",  name: "test", component: () => import("@/components/test.vue") }
    ]
    // redirect:"/index"// 设置默认显示路由
  }
]  

//设置子路由需要考虑 电视机 路由显示位置   router-view

const router = new VueRouter({
  // mode:"history",   //设置 路由类型  hash #/
  routes
});

//router.beforeEach

export default router;

全局路由钩子函数

const router = new VueRouter({
  // mode:"history",   //设置 路由类型  hash #/
  routes
});
//全局路由钩子函数,如果不用刻意不写
router.beforeEach((to, from, next) => {
  //from  从哪来
  //to    到哪去
  //next(); 是否到下一个路由
  //所有的路由访问 都会执行  
    
  //根据参数 跳转项不同位置  
  if (to.path == "/") {
    if (params.userType === "index") {
      next({
        path: "/index"
      });
    } else if (params.userType === "list") {
      next({
        path: "/list"
      });
    } else if (params.userType === "test") {
      next({
        path: "/test"
      });
    }
  } else {
    next();
  }
});
router.afterEach((to, from) => {
  // console.log("路由跳转完毕")
});
export default router;

- 局部路由钩子

<template>
</template>
export default {
  // 路由进入组件,要比最早的生命周期早
  
  beforeRouteEnter(to, from, next) {
    /*
    if(from.path=="/test"){
    	//show
      next({path:"/index"});
    }else{
      next();
    }
    */
     next();
  },
  //路由离开组件
  beforeRouteLeave(to, from, next) {
    next();
  },
  //控制子路由执行
  beforeRouteUpdate(to, from, next) {
    next();
    console.log("beforeRouterUpdate");
  }
  beforeCreate(){
        console.log("实例初始化之前")
  }
};
</script>

控制从外部进入项目,到项目内部跳转

- 路由传参

路由跳转用router,参数获取用route

<template>
  <div class="home">
     <router-link to="/test">toPath</router>
     <router-link to="{path:'/test',query:{name:'luce'}}">toPath</router>
    <button @click="toPath">toTest</button>
  </div>
</template>
export default {
  methods:{
    toPath(item){
      // console.log(this.$router)
        
      // this.$router.push("/test");
      // this.$router.push("/test?name=Msea");
        
      //query 地址栏显示,刷新不丢失
      //name  router路由配置项需要加 name:"index" name携带参数 params地址栏不显示 刷新丢失  
      // this.$router.push({path:"/test",query:{name:"luce"}});
      // this.$router.push({name:"test",params:{name:"lala"}});
    }
  }
};

- 动态title

cnpm i vue-wechat-title@2.0.4 -S

//main.js
import vueWechatTitle from "vue-wechat-title"
Vue.use(vueWechatTitle)

//router/index.js
{
    path: "index",
    component: () => import("@/components/index.vue"),
    meta: {
    title: "首页",
    	uname:"Msea"  //自定义
    }
},
//组件
 <router-view v-wechat-title="$route.meta.title" img-set="/img/favicon.ico"/>
 computed:{
    testRoute(){
      return this.$route.meta;
    }
  }

- vconsoe 移动端控制台调试工具

https://cdn.staticfile.org/vConsole/3.3.4/vconsole.min.js

//在public里面 index.html 模板引入
<script src="/js/vconsole.min.js"></script>
<script>
    // init VConsole
    new VConsole();
</script>

静态资源目录

在这里插入public  
assets
//静态资源目录,assets跟public目录的区别,public资源不会被webpack处理代码片

配置淘宝响应式框架

cnpm i lib-flexible -S
//在main.js 引入 
import 'lib-flexible/flexible.js'
//检查元素  html 出现设置字体

//单位计算
// 逻辑像素 开发            375*667       100/(37.5)+rem 
// 物理像素 设计(PSD)       750*1334      100/75  +rem

全局scss

//注意需要配置全局scss

  //配合sass
$baseSize:75/2;//我们直接按照的逻辑像素

  @function r($px){
      @return $px/$bassSize+rem;
  }
  @mixin setRem($name, $val...) {
  	// ...固定写法,向后若干个值
      $max: length($val); //4
  	$str: "";
  	// 从1开始到$max(4)
  	@for $i from 1 through $max {
  		$value: nth($val, $i)/$bassSize; //2.17391
  		$str: $str+$value+rem; //4.34783rem

  		@if $i<$max {
  			$str:#{$str+" "}; //4.34783rem空格4.34783rem空格
  		}
  	}
  	#{$name}:$str;// padding:10rem 10rem 10rem 10rem;
  }

  vue.config.js
  css: {
    loaderOptions: {
      sass: {
          //注意 写 ~ 分号结束;
        prependData: `
        @import "~@/assets/css/index.scss";	
       `
      }
    }
  }

use使用

在这里插入代码    //Vue.use  支持传入一个函数
    Vue.use((Vue)=>{
        console.log(Vue);
        //Vue.prototype.$eventBus=new Vue();
        //Vue.directive
        //Vue.componet
    })片