<强> vue开发依赖的相关配置
Vue SSR指南
今天先做客户端方面的配置,明天再做服务端的部分。
那么马上开始吧~
修改部分代码
脚手架生成的代码肯定是不适合我们所用的所以要修改一部分代码
//App.vue
& lt; template>
& lt; div id=坝τ谩北?
& lt; router-view> & lt;/router-view>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“应用程序”
}
& lt;/script>
& lt; style>
html、身体#应用,# app> * {
宽度:100%;
高度:100%;
}
身体{
Helvetica字体类型:‘Avenir’, Arial,无衬线;
-webkit-font-smoothing:平滑;
-moz-osx-font-smoothing:灰度;
text-align:中心;
颜色:# 2 c3e50;
字体大小:16 px;
保证金:0;
overflow-x:隐藏;
}
img {
宽度:200 px;
}
& lt;/style>
之前
修改主要。js
为什么要这么做?为什么要避免状态单例
主要。js是我们应用程序的“通”用条目。
在纯客户端应用程序中,我们将在此文件中创建根Vue实例,并直接挂载到DOM。
但是,对于服务器端渲染(SSR),责任转移到纯客户端入口文件。
主要。js简单地使用出口导出一个createApp函数:
从“进口Vue Vue ';
Vue.config。productionTip=false;
从“进口程序。/App.vue ';//路由器存储实例//这么做是避免状态单例
导出功能createApp () {
const应用=new Vue ({//挂载路由器,商店
呈现:h=比;h(应用)
}）//暴露应用实例
返回{应用};
}
之前
<强>添加Vue.config。js配置
webpack的入口文件有两个,一个是客户端使用,一个是服务端使用。
为何这么做?
今天只做客户端部分。
src/vue.config.js
模块。出口={
css: {
精华:假//关闭提取css,不关闭节点渲染会报的错
},
configureWebpack:()=比;({
条目:“。/src/条目/客户端
}）
}
之前
<强>根目录创建条目文件夹,以及webpack入口代码
mdkir条目
cd条目
创建入口文件
客户端。js作为客户端入口文件。
服务器,js作为服务端端入口文件。//先创建不做任何配置
条目/client.js
从“. ./main.js”进口{createApp};
const{应用}=createApp ();
应用。美元山(“#应用”);
之前
<>强路由和代码分割
官方说明的已经很清楚了,我就不做过多介绍了、下面直接展示代码
添加新路由,这里将存放页面的相关路由
src/页面/路由器/index.js
/* *
*
中@ method componentPath *路由模块入口
* @param{}字符串名称要引入的文件地址
* @return{对象}
*/函数componentPath (name='家'){
返回{
组件:()=比;导入(“. ./${名称}/index.vue”)
}
}
出口违约(
{
路径:/home,
…componentPath (),
孩子:(
{
路径:“vue”,
名称:“vue”,
…componentPath (home/vue)
},
{
路径:“vuex”,
名称:“vuex”,
…componentPath (home/vuex)
},
{
路径:“vueCli3”,
名称:“vueCli3”,
…componentPath (home/vueCli3)
},
{
路径:“vueSSR”,
名称:“vueSSR”,
…componentPath (home/vueSSR)
}
]
}
]
之前
src/router.config。js作为路由的总配置易于管理
//路由总配置
从“进口Vue Vue ';
从“进口VueRouter vue-router ';
Vue.use (VueRouter);//为什么采用这种做法。//如果以后有了别的大模块可以单独开个文件夹页与平级//再这里导入即可。这样易于管理//页面
进口从“。/页面/路由器”页面;
导出功能createRouter () {
返回新VueRouter ({
模式:“历史”,
路线:[
{
路径:“*”,
重定向:“/home/vue”
},
页面…
]
}）
}
