1、在webpack中配置vue组件页面的解析
- 运行
cnpm i vue -S
将vue安装为运行依赖; - 运行
cnpm i vue-loader vue-template-compiler -D
将解析转换vue的包安装为开发依赖; - 运行
cnpm i style-loader css-loader -D
将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式; - 在
webpack.config.js
中,添加如下module
规则:
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.vue$/, use: 'vue-loader' }
]
}
复制代码
2、项目搭建
首先创建App.vue写出项目的结构,在main.js中导入vue,渲染出页面
import Vue from 'vue'
// 导入app根组件
import app from './App.vue'
var vm = new Vue({
el:'#app',
render:c => c(app), //在普通页面中使用render函数渲染组件
router //1.4挂载路由对象到实例上
})
复制代码
补充: 在使用webpack构建的Vue项目中使用模板对象? 在webpack.config.js
中添加resolve
属性:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
复制代码
3、在App.vue组件中写出项目的框架
在App.vue中把项目的顶部、内容、底部等全部用路由写出,在router.js中再配置对应的路由组件内容,对应的路由就可以显示对应的组件内容
import VueRouter from 'vue-router'
import HomeContainer from './components/tabbar/HomeContainer.vue'
import MemberContainer from './components/tabbar/MemberContainer.vue'
var router = new VueRouter({
routes:[
{path:'/',redirect:'/home'},
{path:'/home',component:HomeContainer},
{path:'/member',component:MemberContainer},
],
linkActiveClass:'mui-active' //覆盖默认的路由高亮的类router-link-exact-active
})
复制代码
4、项目结束
项目完成后,将dist文件删除,使用webpack
重新打包,这时候会新生成dist文件夹下有index.html和bundle.js文件。
1) 将项目托管到Apache并启用Gzip压缩(使用的phpstudy)
要让apache支持gzip功能,要用到deflate_Module和headers_Module。打开apache的配置文件httpd.conf,大约在105行左右,找到以下两行内容:(这两行不是连续在一起的)
#LoadModule deflate_module modules/mod_deflate.so
#LoadModule headers_module modules/mod_headers.so
复制代码
然后将其前面的“#”注释删掉,表示开启gzip压缩功能。开启以后还需要进行相关配置。在httpd.conf文件的最后添加以下内容即可:
<IfModule deflate_module>
#必须的,就像一个开关一样,告诉apache对传输到浏览器的内容进行压缩
SetOutputFilter DEFLATE
DeflateCompressionLevel 9
</IfModule>
复制代码
最少需要加上以上内容,才可以生gzip功能生效。由于没有做其它的额外配置,所以其它相关的配置均使用Apache的默认设置。这里说一下参数“DeflateCompressionLevel”,它表示压缩级别,值从1到9,值越大表示压缩的越厉害。
2) 使用ngrok将本机映射为一个外网的Web服务器
注意:由于默认使用的美国的服务器进行中间转接,所以访问速度炒鸡慢,访问时可启用FQ软件,提高网页打开速度!