vue全家桶安装指导
安装vue-cli
npm install -g vue-cli
1通过vue-cli模版创建vue项目
vue init webpack-simple 你的项目名
2进入项目安装依赖
cd 你的项目文件夹
npm install
3运行项目
npm run dev
现在可以查看结果
浏览器输入
localhost:8080
查看结果
整合elementui
4整合安装elementui
npm install element-ui -S
5安装style-loader
npm install style-loader -S
6在webpack.config中配置匹配字体的loader
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {}
// other vue-loader options go here
}
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}, {
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}]
},
和elementui的整合完成
使用elemntUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI);
整合vue-router
安装
npm install vue-router -S
使用vue-router
import VueRouter from 'vue-router'; Vue.use(VueRouter); //经过测试这里不能写成require(./router)的形式,只能这么写才能生效,暂时不知道为啥 const router = new VueRouter(routes); new Vue({ router, render: h => h(App) }).$mount('#app');
router.js中配置如下
//这个路由表是从app.vue开始算起的,如果加载后的vue文件包含子路由,都需要配置在children中 export default { routes: [{ path: '/index', component: resolve => require(['./views/index.vue'], resolve), children: [{ path: 'content', components: { //这个是因为 leftNav: resolve => require(['./views/left-nav.vue'], resolve), mainContent: resolve => require(['./views/main-content.vue'], resolve), breadCrumb: resolve => require(['./views/bread-crumb.vue'], resolve) } }] }, { path: '/job', component: resolve => require(['./views/job/job-list.vue'], resolve) }, { path: '/menu', component: resolve => require(['./views/left-nav.vue'], resolve), }] }
解释:
routes 相当于匹配的是第一个router-view
如果第一个router-view中的页面中还有嵌套router-view则需要配置在children中
经过测试component和components二者只能存在一个
components表示的是一个页面存在多个router-view,通过name值进行指定
例如
leftNav: resolve => require(['./views/left-nav.vue'], resolve), 对应页面中的 <router-view name="leftNav"></router-view>
其中:
resolve => require(['./views/left-nav.vue'], resolve),
这个是懒加载页面,优化页面性能,es6语法,
简单的理解为就是类似
function(resolve){ return require(['./views/left-nav.vue'], resolve); }
app.vue如下
<template> <div id="app"> {{welcome}} <p> <router-link to="/index/content">跳转首页</router-link> <router-link to="/job">跳转列表</router-link> <router-link to="/menu">caidan</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </template> <script> export default { data() { return { welcome: '欢迎光临,这是app' }; } }; </script>
index.vue如下
<template> <div> <span>{{msg}}</span> <router-view name="leftNav"></router-view> <router-view name="mainContent"></router-view> <router-view name="breadCrumb"></router-view> </div> </template> <script> export default { data() { return { msg: '5555' } } } </script>