欢迎使用CSDN-markdown编辑器

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>