Vue(day7)
一、环境搭建
下面我们需要为后面要做的Vue项目搭建开发环境。
1、基本的运行环境
该项目使用node& vue在webpack环境下进行开发。首先安装基本的模块文件：
npm install webpack webpack-cli -S-D
npm install vue -S-D
#使用webpack-dev-server进行热开发
npm install webpack-dev-server -D
最基本的环境配置（注意文件地址要和项目文件目录对应）：
webpack-config.js
var path = require('path');
module.exports = {
entry: path.join(__dirname, './main.js'),//入口
output: {//出口
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
}
};
为了快速启动还需要在pack.json中增加一个启动配置：
"scripts": {
"dev": "webpack-dev-server --open --port 8080 --contentBase / --hot"
},
最基本的运行环境就搭建好了。
2、基本的插件以及文件loader
安装：
# html模板插件
npm i html-webpack-plugin -D
# css loader
npm i style-loader css-loader -D
# url loader
npm i url-loader file-loader -D
# vue loader
npm i vue-loader vue-template-compiler -D
# vue-router
npm i vue-router -D
配置：
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: path.join(__dirname, './main.js'),//入口
output: {//出口
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [//插件
new htmlWebpackPlugin({
template: path.join(__dirname, "./src/index.html"),
filename: 'index.html'
}),
new VueLoaderPlugin(),
],
module: {//第三方模块
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.(jpg|png|bmp|jpeg|gif)$/, use: 'url-loader?limit=2048name=[name].[ext]'},
{test: /\.(ttf|svg|eot|woff|woff2)$/, use: 'url-loader'},
{test: /\.vue$/, use: 'vue-loader'},
]
}
};
其余要用到的插件或loader按需安装配置即可。
3、测试
在整个项目开发之前，我们应该先测试一下运行环境是否异常。
创建以下文件（目录自行安排）：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<div id="app">Hello</div>
</body>
</html>
main.js
import Vue from 'vue';
import App from './app.vue';//组件
import router,{VueRouter} from './router.js';//路由
Vue.use(VueRouter);
new Vue({
el: '#app',
render: f => f(App),
router,
});
app.vue
<template>
<div class="app">
<h1> {{ msg }} </h1>
<p class="router">
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello Vue!'
}
}
}
</script>
<style scoped>
.app {
color: #3254da;
}
.router {
color: red;
}
</style>
router.js
import VueRouter from 'vue-router';
//1、视图组件
import home from './src/home.vue';
import about from './src/about.vue';
//2、路由规则
var routes = [
{path: '/home', component: home},
{path: '/about', component: about}
];
//3、路由实例
var router = new VueRouter({
routes
});
//4、导出
export default router;
export {VueRouter};
home.vue
<template>
<h2>Home page...</h2>
</template>
<script>
</script>
<style scoped>
</style>
about.vue
<template>
<h2>About page...</h2>
</template>
<script>
</script>
<style scoped>
</style>
运行以查看效果：
npm run dev
二、Mint-UI和MUI的使用
1、Mint-UI快速开始
具体可参考官方网址(可能需要FQ)
Mint-UI是基于Vue开发的组件框架，是基于移动端的组件库。现在我们通过上面搭建的环境进行快速起步。
#安装
npm i mint-ui -S
安装完成后你可以完整引入mint-ui的完整组件，也可以按需引入。
#完整引入
import Vue from 'vue'
import App from './app.vue'
//完整引入Mint-UI提供的组件
import MintUI from 'mint-ui'//组件
import 'mint-ui/lib/style.css'//样式
//相当于全局注册所有组件
Vue.use(MintUI)
new Vue({
el: '#app',
render: f => f(App)
})
现在我们在app.vue中使用即可：
<template>
<div class="app">
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
</div>
</template>
<script>
</script>
<style scoped>
</style>
效果：
#按需引入
有时候我们不需要使用太多的组件，所以完整引入会让项目体积更大，所以简单使用时推荐按引入。
按需引入需要安装一个插件：babel-plugin-component。
npm i babel-plugin-component -D
这是babel提供的相关模块，所以我们还需要新建名为.babelrc配置文件，并配置(无需记忆，查文档即可)：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
也可以将插件配置到webpack.config.js中。
按需引入就是使用export导出的组件，所以我们这样引用即可：
import { Button } from 'mint-ui';//按需引入组件
Vue.component(Button.name, Button);//全局注册
2、Mint-UI中Toast组件的使用
Mint-UI中有很多组件，现在我们以toast组件为例进行深入学习。
Toast有烤面包、祝酒之意，但是功能却是：简短的消息提示框，支持自定义位置、持续时间和样式。属于js组件。
我们在上面的案例中Button组件中使用这个Toast组件。
<template>
<div class="app">
<mt-button type="default" @click="show">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
</div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {//注意，这里使用modules.exports导出会报错
methods: {
show(){
Toast('提示信息');
}
}
}
</script>
<style scoped>
</style>
这是最简单的用法，还可以传入更多参数进行配置：
比如
//设置显示位置及显示时间
Toast({
message: '提示',
position: 'bottom',
duration: 5000
});
更多参数：
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| message | 文本内容 | String | ||
| position | Toast 的位置 | String | 'top' 'bottom' 'middle' | 'middle' |
| duration | 持续时间（毫秒），若为 -1 则不会自动关闭 | Number | 3000 | |
| className | Toast 的类名。可以为其添加样式 | String | ||
| iconClass | icon 图标的类名 | String |
执行 Toast 方法会返回一个 Toast 实例，每个实例都有 close 方法，用于手动关闭 Toast。
3、MUI的使用
MUI是移动端得前端样式框架，类似于bootStrap框架，可以达到开箱即用的效果。
使用这些优秀的框架在不影响项目性能的情况下能极大地提高我们的开发效率。
MUI目前没有提供npm的安装途径，所以我们需要将依赖拷贝到项目适合的位置。使用方法类似于使用bootStrap。
现在我们先将依赖包下载到项目中，新建一个dist目录，项目的git地址，完整包或案例可自行下载。
比如我们先查阅文档并使用MUI提供的数字角标。
<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">567</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">556</span>
现在没有样式，我们在main.js导入我们刚才拷贝到项目的文件即可，这里我们只用到了css文件：
import './dist/mui/css/mui.min.css'
三、项目起始
1、项目一览
项目分为三部分：顶部的Header，底部的Tabbar，还有中间的Container内容区。Tabbar内容的切换由VueRouter实现。
Home主界面的效果图如下，也是本文需要完成的内容，涉及到Vue-Router用于切换界面，轮播图用于显示事实讯息，九宫格|栅格为功能按钮。
2、 将项目上传到git
在git init之前，我们先创建一个过滤文件的配置文件.gitignore，参考：https://www.jianshu.com/p/a09a9b40ad20。
node_modules
.idea
.vscode
.git
可使用git命令行进行上传，推荐使用完善的git工具，如GitKraken。
本项目上传地址：https://github.com/fongzhizhi/VueDemo
3、Home界面
轮播图和九宫格都是使用的Mint-UI和MUI提供的组件，这里不再细述。代码已上传至git，可自行参考。
