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，可自行參考。

每日一句

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