vue学习大纲6- webpack2+vue-loader

webpack+vue-loader 搭建环境

• 需要安装的有：

  • 安装webpack相关的文件：npm i webpack webpack-dev-server --save-dev
  • 安装vue编译中需要的：npm i vue-loader vue-template-compiler --save-dev
  • 安装vue上线后需要的：npm i vue vue-router --save 开发依赖
  • 安装babel相关的：npm i babel-core babel-loader babel-preset-es2015 style-loader css-loader --save-dev
  • 安装模版文件插件：html-webpack-dev

• 配置方式跟react+webpack2的配置很类似；我配置的webpack.config.js的代码如下

const path=require('path');
const webpack=require('webpack');
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
    entry:path.resolve(__dirname,'./src/main.js'),
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:'babel-loader'
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.vue$/,
                use:'vue-loader'
            }

        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

编写子组件

• 通过export default导出JS部分,template模版部分不用单独导出

export default{
    data(){
        return{msg:'首页'}
    }
}

子组件样式的使用

• 在style中设置样式的时候，如果只对当前组件有效
  • 给style加上"scoped"属性；
• 设置less样式；需要在style中设置lang和rel如下
  • 这时会报错，需要安装less 和 less-loader

<style scoped lang="less" rel="stylesheet/less">
div{
    background: blue;
    h1{
        color: #ffffff;
    }
}
</style>

路由配置

1、在main.js中引入,注册 vue-router; 因为配置的路由可能会很多，所以，把配置部分单独拎到 router.js文件中
- Vue.use(VueRouter) 它可以把VueRouter注册为全局组件；这样在任何组件中都能使用；

import VueRouter from 'vue-router';
import Route from './router';
Vue.use(VueRouter);
var router=new VueRouter(Route);

2、在router.js中引入我们需要映射的组件,导出写好的映射；

export default {
    routes:[
        {path:'/about',component:About},
        {path:'/contact',component:Contact}
    ]
}

3、在main.js中导入已经配置好的router.js,并把router添加到app的实例中
4、在导航组件Navs.js中添加路由跳转和渲染；

<div>
    <router-link to="/about">关于我们</router-link>
    <router-link to="/contact">联系我们</router-link>
    <router-view></router-view>
</div>

路由动画

• 在main.js中引入第三方库:animate.css
• 通过vue提供的transition来设置动画：让谁动，就对谁设置动画

Vue.use()

• 作用：注册全局组件，让这个组件在任何组件都能使用；
• 自己封装组件，然后用use注册为全局组件：
  • 创建Button组件
  • 注册自定义组件：Button

  export default {
      install(){
          Vue.component("lei-button",Button);
      }
  }
  

• 在main.js中，Vue.use把Button组件注册为全局组件；这样哪里就都能用"lei-button"这个自定义组件了；

axios：它的使用方式跟vue-resource一样；区别是

• vue-resource 通过Vue.use() 注册为全局组件
• axios：通过 Vue.prototype.$http=axios 注册为全局组件

vue-cli 参考 github上的vue-cli的使用即可；

https://github.com/vuejs/vue-cli