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软件，提高网页打开速度！