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中的“/”，改为“./”即可