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快速开始

具体可参考官方网址(可能需要翻墙)

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。

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

Vue(day7)的更多相关文章

vue day7 table checkbox 全选
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
Vue.js - day7
使用mui的tab-top-webview-main完成分类滑动栏兼容问题和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容性问题,导致tab栏失效, ...
day7(vue发送短信)
1.vue发送短信逻辑前端函数如下,js方法代码无需更改,前端代码逻辑在components\common\lab_header.vue 只需要修改components\axios_api\http ...
Vue入门到精通
Vue.js - Day1 课程介绍前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

随机推荐

JavaScript设计模式Item 1—多态
多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果.换句话说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈. 从字面上来理解多态不太容易, ...
python爬取所有微信好友的信息
''' 爬取所有T信好友的信息 ''' import itchat from pandas import DataFrame itchat.login() friends=itchat.get_fri ...
各位情人节快乐, Python帮忙撒狗粮, 我连夜做了这个程序!
阅读本文大概需要5分钟码农的情人节一年一度的情人节要来啦,这个浪漫温馨的节日,走在大街小巷,走在地铁里,走在商场里,走在电影院,姑娘们手里几乎都捧着一束花,心里都是乐滋滋的,一脸幸福的样子,忽然想 ...
mac下安装Maven和配置环境变量
1.下载maven包: 下载链接:
Guava新增集合类型-Bimap
Guava新增集合类型-Bimap BiMap提供了一种新的集合类型,它提供了key和value的双向关联的数据结构. 通常情况下,我们在使用Java的Map时,往往是通过key来查找value的,但 ...
lease.go
package ) type:]...) :]...) )*time.Second) ) go func() { select { case <-stop ...
树链剖分的一种妙用与一类树链修改单点查询问题的时间复杂度优化——2018ACM陕西邀请赛J题
题目描述有一棵树,每个结点有一个灯(初始均是关着的).每个灯能对该位置和相邻结点贡献1的亮度.现有两种操作: (1)将一条链上的灯状态翻转,开变关.关变开: (2)查询一个结点的亮度. 数据规模:\ ...
BZOJ_3932_[CQOI2015]任务查询系统_主席树
BZOJ_3932_[CQOI2015]任务查询系统_主席树题意: 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的任务用三元组(Si,Ei,P ...
【小白学C#】谈谈C#多播委托因异常而终止的解决方案
一.前言前几天,马三在与朋友闲聊技术的时候,朋友忽然抛出一个问题,把马三难倒了,本着求知的精神,回来以后马三就查阅了相关资料并做了一些实验,终于把问题搞明白了,因此写下本篇博客记录一下.首先,问题是 ...
APP界面设计与页面布局的23条基本原则
一个App的好与不好,很大部分取决于移动App页面布局的合理性,优秀的布局顾名思义就是对页面的文字.图形或表格等进行排版.设计. 优秀的布局,需要对页面信息进行完整的考虑,既要考虑用户需求.用户行为, ...