关于VueRouter导入的全过程_vue.js_

yarn add nanoid

import {nanoid} from 'nanoid' var id = nanoid()

yarn add vue-router

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import Movie from '../pages/Movie/index.vue' import Music from '../pages/Music/index.vue' const routes = [ { path:"/music", component:Music }, { path:"/movie", component:Movie } ] const router = new VueRouter({ routes, mode:"history" }) export default router; 

import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({   router,   render: h => h(App), }).$mount('#app')

Vue.filter("handleStr",function(val){   if(val.length > 3){     val = val.slice(0,3) + '...'   }   return val }) 

yarn add element-ui

.... import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ...

import Loading from '../components/Loading.vue' Vue.component("Loading",Loading)

lib-flexible 阿里

yarn add lib-flexible postcss-pxtorem@5.1.1

module.exports = {   plugins: {     'postcss-pxtorem': {       rootValue: 75,       propList: ['*'],     },   }, };

import 'lib-flexible/flexible.js'

// #1 定义一个组件 

// #2 使用 

1、rem 2、asssreset.css

.router-link-active{     color: #ff2d51;   }

const routes = [   {     path: '/films',     name: 'Films',     component:Films,     meta:{       isNav:true     }   },   {     path: '/article',     name: 'Article',     component:Article,     meta:{       isNav:true     }   },   {     path: '/center',     name: 'Center',     component:Center,     meta:{       isNav:true     }   },   {     path:"/movie/:id",     name:'MovieDetail',     component:MovieDetail   } ]

this.$router.back()

yarn add vue-preview 

import VuePreview from 'vue-preview' Vue.use(VuePreview)

yarn add vant babel-plugin-import

module.exports = {   presets: [     '@vue/cli-plugin-babel/preset'   ],   plugins: [     ["import", {       "libraryName": "vant",       "libraryDirectory": "es",       "style": true     }]   ] }

import {Button} from 'vant' Vue.use(Bu
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：关于element-ui日期时间选择器选不中12小时以后的时间详解_vue.js_
                                                                
下一篇：vue3.2 Composition API项目依赖升级_vue.js_