vue+webpack构建单页面应用笔记（不断更新中。。。）

1. 配置子路由以及默认让某个子路由显示

routes: [    {      path: '/',      name: 'HelloWorld',      component: HelloWorld    },    {      path: '/msg',      name: 'msg',      component: msg,      redirect: {          name: 'msg1' // 配置默认进入的子路由页面      },      children: [        {          path: '/msg1',          component: msg1,          name: 'msg1',          meta: {            requiresAuth: true          }        },        {path: '/msg2',component: msg2},        {path: '/msg3',component: msg3}      ]    }  ]

2. vue-cli webpack全局引入jquery

(1) 在package.json的dependencies里加入：

"dependencies": {    "jquery": "^2.2.3" // 版本号  }

(2) npm install（推荐cnpm，更高、更快、更强。。。）

(3) 在build文件夹里的webpack.base.conf.js引入webpack：

var webpack = require("webpack")

(4) 然后在module.exports的最后加上：

plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({     jQuery: "jquery",     $: "jquery" })]

(5) 最后在main.js里面引入jquery：

import $ from 'jquery'

3. vue-cli webpack全局引入bootstrap

(1) 首先在项目里面install bootstrap：

npm install bootstrap --save-dev

(2) 然后在main.js中引入bootstrap的css和js：

import 'bootstrap/dist/css/bootstrap.min.css'import 'bootstrap/dist/js/bootstrap.min'

4. npm run build 打包后，如何运行在本地查看效果

     run build后控制台会有这么一个提示，这句话意思就是构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。

想要打包后的文件在本地运行：
     到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”即可