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