vue開發(fā)依賴的相關(guān)配置
今天先做客戶端方面的配置，明天再做服務(wù)端的部分。
那么馬上開始吧~
修改部分代碼
腳手架生成的代碼肯定是不適合我們所用的 所以要修改一部分代碼
//App.vue<template> <div id="app"> <router-view></router-view> </div></template><script>export default { name: 'app'}</script><style> html,body,#app,#app>*{ width: 100%; height: 100%; } body{ font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; font-size: 16px; margin: 0; overflow-x: hidden; } img{ width: 200px; }</style>修改main.js
main.js 是我們應(yīng)用程序的「通用 entry」。
在純客戶端應(yīng)用程序中，我們將在此文件中創(chuàng)建根 Vue 實(shí)例，并直接掛載到 DOM。
但是，對(duì)于服務(wù)器端渲染(SSR)，責(zé)任轉(zhuǎn)移到純客戶端 entry 文件。
main.js 簡(jiǎn)單地使用 export 導(dǎo)出一個(gè) createApp 函數(shù)：
import Vue from 'vue';Vue.config.productionTip = false;import App from './App.vue';//router store 實(shí)例//這么做是避免狀態(tài)單例export function createApp() { const app = new Vue({ //掛載router，store render: h => h(App) }) //暴露app實(shí)例 return { app };}添加Vue.config.js配置
webpack的入口文件有兩個(gè)，一個(gè)是客戶端使用，一個(gè)是服務(wù)端使用。
今天只做客戶端部分。
src/vue.config.js module.exports = { css: { extract: false//關(guān)閉提取css,不關(guān)閉 node渲染會(huì)報(bào)錯(cuò) }, configureWebpack: () => ({ entry: './src/entry/client' }) }根目錄創(chuàng)建 entry 文件夾，以及webpack入口代碼
mdkir entry cd entry 創(chuàng)建 入口文件 client.js 作為客戶端入口文件。 server,js 作為服務(wù)端端入口文件。 //先創(chuàng)建不做任何配置 entry/client.js import { createApp } from '../main.js'; const { app } = createApp(); app.$mount('#app');路由和代碼分割
官方說明的已經(jīng)很清楚了，我就不做過多介紹了，下面直接展示代碼
添加新路由，這里將存放pages的相關(guān)路由
src/pages/router/index.js
/** * * @method componentPath 路由模塊入口 * @param {string} name 要引入的文件地址 * @return {Object} */function componentPath (name = 'home'){ return { component:() => import(`../${name}/index.vue`) }}export default [ { path: '/home', ...componentPath(), children: [ { path: "vue", name: "vue", ...componentPath('home/vue') }, { path: "vuex", name: "vuex", ...componentPath('home/vuex') }, { path: "vueCli3", name: "vueCli3", ...componentPath('home/vueCli3') }, { path: "vueSSR", name: "vueSSR", ...componentPath('home/vueSSR') } ] }]src/router.config.js作為路由的總配置 易于管理
//路由總配置 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); //為什么采用這種做法。 //如果以后有了別的大模塊可以單獨(dú)開個(gè)文件夾與pages平級(jí) //再這里導(dǎo)入即可。這樣易于管理 // pages import pages from './pages/router'; export function createRouter() { return new VueRouter({ mode: 'history', routes: [ { path: "*", redirect: '/home/vue' }, ...pages ] }) }更新main.js
import Vue from 'vue';Vue.config.productionTip = false;import App from './App.vue';+ import { createRouter } from './router.config.js'//router store 實(shí)例//這么做是避免狀態(tài)單例export function createApp() {+ const router = createRouter() const app = new Vue({+ router, render: h => h(App) }) //暴露app,router實(shí)例 return { app, router };}更新 client.js
由于使用的路由懶加載，所以必須要等路由提前解析完異步組件，才能正確地調(diào)用組件中可能存在的路由鉤子。
// client.jsimport { createApp } from '../main.js';const { app, router } = createApp();router.onReady( () => { app.$mount('#app');})以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
