Vue:webpack+vue-loader

1.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
• 配置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'
        })
    ]
}

2.编写子组件

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

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

3.子组件样式的使用

• 在style中设置样式的时候，如果只对当前组件有效
  • 给style加上"scoped"属性；
    +设置less样式；需要在style中设置lang和rel，需要安装less 和 less-loader
    npm i --save-dev less less-loader
<style scoped lang="less" rel="stylesheet/less">div{background: blue;h1{ color: #ffffff;}}</style>

4.路由配置

4.1、在main.js中引入,注册 vue-router; 因为配置的路由可能会很多，所以，把配置部分单独拎到 router.js文件中

• main.js配置如下
  - Vue.use(VueRouter) 它可以把VueRouter注册为全局组件；这样在任何组件中都能使用；
• router.js配置如下

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

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

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

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

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

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