5
10天从入门到精通Vue(六)webpack打包Vue项目和MintUI 组件使用
source link: https://blog.51cto.com/zhanjq/5610720
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
10天从入门到精通Vue(六)webpack打包Vue项目和MintUI 组件使用
推荐 原创Table of Contents
有时候使用npm i node-sass -D
装不上,这时候,就必须使用 cnpm i node-sass -D
在普通页面中使用render函数渲染组件
在webpack中配置.vue组件页面的解析
- 运行
cnpm i vue -S
将vue安装为运行依赖; - 运行
cnpm i vue-loader vue-template-compiler -D
将解析转换vue的包安装为开发依赖; - 运行
cnpm i style-loader css-loader -D
将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式; - 在
webpack.config.js
中,添加如下module
规则:
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.vue$/, use: 'vue-loader' }
]
}
- 创建
App.js
组件页面:
<template>
<!-- 注意:在 .vue 的组件中,template 中必须有且只有唯一的根元素进行包裹,一般都用 div 当作唯一的根元素 -->
<div>
这是APP组件 - {{msg}}
<h3 id="h0">我是h3</h3>
</div>
</template>
<script>
// 注意:在 .vue 的组件中,通过 script 标签来定义组件的行为,需要使用 ES6 中提供的 export default 方式,导出一个vue实例对象
export default {
data() {
return {
msg: 'OK'
}
}
}
</script>
<style scoped>
h1 {
color: red;
}
</style>
- 创建
main.js
入口文件:
// 导入 Vue 组件
import Vue from 'vue'
// 导入 App组件
import App from './components/App.vue'
// 创建一个 Vue 实例,使用 render 函数,渲染指定的组件
var vm = new Vue({
el: '#app',
render: c => c(App)
});
在使用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组件页面中,集成vue-router路由模块
- 导入路由模块:
import VueRouter from 'vue-router'
- 安装路由模块:
Vue.use(VueRouter);
- 导入需要展示的组件:
import login from './components/account/login.vue'
import register from './components/account/register.vue'
- 创建路由对象:
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
- 将路由对象,挂载到 Vue 实例上:
var vm = new Vue({
el: '#app',
// render: c => { return c(App) }
render(c) {
return c(App);
},
router // 将路由对象,挂载到 Vue 实例上
});
- 改造App.vue组件,在 template 中,添加
router-link
和router-view
:
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
组件中的css作用域问题
抽离路由为单独的模块
使用 饿了么的 MintUI 组件
- 导入所有MintUI组件:
import MintUI from 'mint-ui'
- 导入样式表:
import 'mint-ui/lib/style.css'
- 在 vue 中使用 MintUI:
Vue.use(MintUI)
- 使用的例子:
<mt-button type="primary" size="large">primary</mt-button>
使用 MUI 组件
- 导入 MUI 的样式表:
import '../lib/mui/css/mui.min.css'
- 在
webpack.config.js
中添加新的loader规则:
{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }
- 根据官方提供的文档和example,尝试使用相关的组件
将项目源码托管到oschina中
- 点击头像 -> 修改资料 -> SSH公钥 如何生成SSH公钥
- 创建自己的空仓储,使用
git config --global user.name "用户名"
和git config --global user.email ***@**.com
来全局配置提交时用户的名称和邮箱 - 使用
git init
在本地初始化项目 - 使用
touch README.md
和touch .gitignore
来创建项目的说明文件和忽略文件; - 使用
git add .
将所有文件托管到 git 中 - 使用
git commit -m "init project"
将项目进行本地提交 - 使用
git remote add origin 仓储地址
将本地项目和远程仓储连接,并使用origin最为远程仓储的别名 - 使用
git push -u origin master
将本地代码push到仓储中
App.vue 组件的基本设置
- 头部的固定导航栏使用
Mint-UI
的Header
组件; - 底部的页签使用
mui
的tabbar
; - 购物车的图标,使用
icons-extra
中的mui-icon-extra mui-icon-extra-cart
,同时,应该把其依赖的字体图标文件mui-icons-extra.ttf
,复制到fonts
目录下! - 将底部的页签,改造成
router-link
来实现单页面的切换; - Tab Bar 路由激活时候设置高亮的两种方式:
- 全局设置样式如下:
.router-link-active{
color:#007aff !important;
}
- 或者在
new VueRouter
的时候,通过linkActiveClass
来指定高亮的类:
// 创建路由对象
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' }
],
linkActiveClass: 'mui-active'
});
实现 tabbar 页签不同组件页面的切换
- 将 tabbar 改造成
router-link
形式,并指定每个连接的to
属性; - 在入口文件中导入需要展示的组件,并创建路由对象:
// 导入需要展示的组件
import Home from './components/home/home.vue'
import Member from './components/member/member.vue'
import Shopcar from './components/shopcar/shopcar.vue'
import Search from './components/search/search.vue'
// 创建路由对象
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/member', component: Member },
{ path: '/shopcar', component: Shopcar },
{ path: '/search', component: Search }
],
linkActiveClass: 'mui-active'
});
使用 mt-swipe 轮播图组件
lunbo: [
'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',
'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',
'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'
]
- 引入轮播图组件:
<!-- Mint-UI 轮播图组件 -->
<div class="home-swipe">
<mt-swipe :auto="4000">
<mt-swipe-item v-for="(item, i) in lunbo" :key="i">
<img :src="item" alt="">
</mt-swipe-item>
</mt-swipe>
</div>
</div>
在.vue
组件中使用vue-resource
获取数据
- 运行
cnpm i vue-resource -S
安装模块 - 导入 vue-resource 组件
import VueResource from 'vue-resource'
- 在vue中使用 vue-resource 组件
Vue.use(VueResource);
本文内容到此结束了,
如有收获欢迎点赞👍收藏💖关注✔️,您的鼓励是我最大的动力。
如有错误❌疑问💬欢迎各位大佬指出。
主页: 共饮一杯无的博客汇总👨💻保持热爱,奔赴下一场山海。🏃🏃🏃
- 1赞
- 1收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK