webpack中使用.vue组件
-
运行
npm i vue -S
将vue安装为运行依赖; -
运行
npm i vue-loader vue-template-compiler -D
将解析转换vue的包安装为开发依赖; -
在
webpack.config.js
中,添加如下module
规则:
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // 必须加
module.exports = {
entry: path.resolve(__dirname, 'src/vuemain.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
},
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/vueindex.html'),
filename:'index.html'
}),
new VueLoaderPlugin() // 必须加
],
module: {
rules: [
{ test: /.scss$/, use: ['style-loader', 'css-loader'] },
{ test: /.vue$/, use: 'vue-loader' } // 必须加
]
}
}
- 创建
login.vue
组件页面
<template>
<div>
<h1>这是登录组件,使用 .vue 文件定义出来的 --- {{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
// 注意:组件中的 data 必须是 function
return {
msg: "456"
};
},
methods: {
show() {
console.log("调用了 login.vue 中的 show 方法");
}
}
};
</script>
<style>
</style>
- 创建
main.js
入口文件:
import Vue from 'vue'
import login from './login.vue'
// 在 webpack 中如果想要通过vue,把一个组件放到页面中去展示,使用vm实例中的render函数
var vm = new Vue({
el:'#app',
data:{
msg:'123'
},
render : c => c(login) //简写
//render: function (createElements) {
//return createElements(login)
//}
})
在使用webpack构建的Vue项目中使用模板对象
- 在
webpack.config.js
中添加resolve
属性:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
ES6中语法使用总结
-
使用
export default
和export
导出模块中的成员; 对应ES5中的module.exports
和export
-
使用
import ** from **
和import '路径'
还有import {a, b} from '模块标识'
导入其他模块 -
使用箭头函数:
(a, b)=> { return a-b; }
.vue中的css样式
- scoped属性:保证样式的作用域只在当前.vue中生效
- lang属性:普通的style标签只支持普通的样式,如果想要启用scss或less等,需要为标签设置lang属性
<style lang="scss" scoped>
div {
color: red;
}
</style>
在.vue组件中集成路由模块
路由
- 安装
npm i vue-router -S
- 导入并安装路由模块(main.js)
import Vue from 'vue'
// 导入 vue-router 包
import VueRouter from 'vue-router'
// 手动安装 VueRouter
Vue.use(VueRouter)
- 导入需要展示的组件(main.js)
import app from './app.vue'
import login from './components/account/login.vue'
import register from './components/account/register.vue'
- 创建路由对象(main.js)
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
- 将路由对象挂载到 Vue 实例上(main.js)
var vm = new Vue({
el: '#app',
render: c => c(app), // 将app组件渲染到index.html中的id='app'的容器
router // 将路由对象,挂载到 Vue 实例上
});
- 改造App.vue组件,在 template 中,添加
router-link
和router-view
:
<template>
<div>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</template>
路由嵌套并抽离路由
- router.js 抽离路由为单独模块
import VueRouter from 'vue-router'
// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 导入Account的两个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'
// 3. 创建路由对象
var router = new VueRouter({
routes: [
{
path: '/account',
component: account,
children: [ // 路由嵌套
{ path: 'login', component: login },
{ path: 'register', component: register }
]
},
{ path: '/goodslist', component: goodslist }
]
})
// 把路由对象暴露出去
export default router
- main.js
import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter
Vue.use(VueRouter)
// 导入 app 组件
import app from './app.vue'
// 导入 自定义路由模块
import router from './router.js'
var vm = new Vue({
el: '#app',
render: c => c(app),
router // 将路由对象挂载到 vm 上
})
- app.vue
<template>
<div>
<h1>这是 App 组件</h1>
<router-link to="/account">Account</router-link>
<router-link to="/goodslist">Goodslist</router-link>
<router-view></router-view>
</div>
</template>
MintUI 组件
Quickstart
- 安装
npm install mint-ui -S
- 导入MintUI组件
// 引入全部组件
import Vue from 'vue';
import MintUI from 'mint-ui';
- 导入样式表
import 'mint-ui/lib/style.css'
// 注意配置webpack.config.js中样式加载器
- 在 vue 中使用 MintUI
Vue.use(MintUI)
- 使用
<mt-button type="primary" size="large">primary</mt-button>
按需导入
- 安装 babel-plugin-component
npm install babel-plugin-component -D
- 配置webpack.config.js的加载器
module: {
rules: [
{ test: /.js$/, use: 'babel-loader', exclude: /node_modules/ },
{ test: /.vue$/, use: 'vue-loader' }
]
}
- 将.babelrc修改为
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime", ["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
- 导入需要的组件
import { Button, Cell } from 'mint-ui'
Vue.component(Button.name, Button); // 名字可以自定义
Vue.component(Cell.name, Cell)
MUI 组件
注意: MUI 不同于 Mint-UI,MUI只是开发出来的一套好用的代码片段,里面提供了配套的样式、配套的HTML代码段,类似于 Bootstrap; 而 Mint-UI,是真正的组件库,是使用 Vue 技术封装出来的 成套的组件,可以无缝的和 VUE项目进行集成开发;
因此,从体验上来说, Mint-UI体验更好,因为这是别人帮我们开发好的现成的Vue组件;
从体验上来说, MUI和Bootstrap类似;
理论上,任何项目都可以使用 MUI 或 Bootstrap,但是,MInt-UI只适用于Vue项目;
注意:不能使用npm下载,需要从 github 上下载现成的包并解压,然后拷贝到项目中使用
- 导入 MUI 的样式表:
import '../lib/mui/css/mui.min.css'
- 根据官方提供的文档和example,尝试使用相关的组件
在.vue组件中使用vue-resource
-
运行
npm i vue-resource -S
安装模块 -
导入 vue-resource 组件
import VueResource from 'vue-resource'
- 在vue中使用 vue-resource 组件
Vue.use(VueResource);