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>
- 给style加上"scoped"属性；
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 注册为全局组件
