1. Configure vUE component page parsing in Webpack

  • runcnpm i vue -SInstall the VUE as a run dependency;
  • runcnpm i vue-loader vue-template-compiler -DInstall the parse transform VUE package as a development dependency;
  • runcnpm i style-loader css-loader -DInstall the package that parses and transforms CSS as a development dependency, because CSS styles are written in the.vue file;
  • inwebpack.config.js“, add the followingmoduleRules:
module: {
    rules: [
      { test: /\.css$/, use: ['style-loader'.'css-loader'] {},test: /\.vue$/, use: 'vue-loader'}}]Copy the code

2. Project construction

First create app.vue to write out the structure of the project, import the vue in main.js, and render the page

import Vue from 'vue'// Import app from the root component'./App.vue'

var vm = new Vue({
    el:'#app', render:c => c(app), // Use the render function on the normal page to render router //Copy the code

Sidebar: Using template objects in Vue projects built with WebPack? Add the resolve attribute to webpack.config.js:

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'}}Copy the code

3. Write the project framework in the app. vue component

In app. vue, the top, content and bottom of the project are all written out with routes. Then configure the corresponding route component content in router.js, and the corresponding route can display the corresponding component content

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'// Override the default router-link-exact-active class})Copy the code

4. End of the project

After the project is complete, delete the dist file and repack it using Webpack. In this case, the dist folder will be generated with index.html and bundle.js files.

1) Host the project to Apache and enable Gzip compression (using PHPStudy)

For Apache to support GZIP, use deflate_Module and headers_Module. Open the apache configuration file httpd.conf, around line 105, and find the following two lines :(they are not contiguously placed)

#LoadModule deflate_module modules/mod_deflate.so
#LoadModule headers_module modules/mod_headers.so
Copy the code

Then delete the “#” comment before it to indicate that the gzip compression function is enabled. After enabling this function, you need to perform related configurations. Add the following to the end of the httpd.conf file:

<IfModule deflate_module>
    Must, like a switch, tell Apache to compress the content transmitted to the browser
    SetOutputFilter DEFLATE
    DeflateCompressionLevel 9
</IfModule>
Copy the code

At least the above content is required for the gZIP function to take effect. Since no additional configuration has been done, all other related configurations use Apache’s default Settings. The parameter “DeflateCompressionLevel” indicates the compression level, ranging from 1 to 9, with a higher value indicating more compression.

2) Use ngrok to map the native to an extranet Web server

Note: due to the default use of the United States server for intermediate transfer, so the access speed fried chicken slow, access can enable FQ software, improve the speed of the web page!