Vue(day7)

时间 2019-12-09

标签 vue day7 day 繁體版

原文原文链接

1、环境搭建

下面咱们须要为后面要作的Vue项目搭建开发环境。css

一、基本的运行环境

该项目使用node& vue在webpack环境下进行开发。首先安装基本的模块文件：html

npm install webpack webpack-cli -S-D
npm install vue -S-D
#使用webpack-dev-server进行热开发
npm install webpack-dev-server -D

最基本的环境配置（注意文件地址要和项目文件目录对应）：前端

webpack-config.jsvue

var path = require('path');

module.exports = {
    entry: path.join(__dirname, './main.js'),//入口
    output: {//出口
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    }
};

为了快速启动还须要在pack.json中增长一个启动配置：node

"scripts": {
    "dev": "webpack-dev-server --open --port 8080 --contentBase / --hot"
  },

最基本的运行环境就搭建好了。webpack

二、基本的插件以及文件loader

安装：git

# 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

配置：github

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按需安装配置便可。web

三、测试

在整个项目开发以前，咱们应该先测试一下运行环境是否异常。vue-router

建立如下文件（目录自行安排）：

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';

//一、视图组件
import home from './src/home.vue';
import about from './src/about.vue';
//二、路由规则
var routes = [
    {path: '/home', component: home},
    {path: '/about', component: about}
];
//三、路由实例
var router  = new VueRouter({
    routes
});

//四、导出
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

2、Mint-UI和MUI的使用

一、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);//全局注册

二、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。

toast参考地址

三、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'

3、项目起始

一、项目一览

项目分为三部分：顶部的Header，底部的Tabbar，还有中间的Container内容区。Tabbar内容的切换由VueRouter实现。

Home主界面的效果图以下，也是本文须要完成的内容，涉及到Vue-Router用于切换界面，轮播图用于显示事实讯息，九宫格|栅格为功能按钮。

二、将项目上传到git

在git init以前，咱们先建立一个过滤文件的配置文件.gitignore，参考：https://www.jianshu.com/p/a09a9b40ad20。

node_modules
.idea
.vscode
.git

可以使用git命令行进行上传，推荐使用完善的git工具，如GitKraken。

本项目上传地址：https://github.com/fongzhizhi/VueDemo

三、Home界面

轮播图和九宫格都是使用的Mint-UI和MUI提供的组件，这里再也不细述。代码已上传至git，可自行参考。

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。