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- ...

随机推荐

HttpMessageConverter 专题
配置HttpMessageConverterHttpMessageConverter是对http的request和response进行自动转换配置HttpMessageConverter可重载下面两个 ...
java.lang.IllegalArgumentException: Request header is too large
tomcat运行项目时,有一个请求过去后,后台报这样的错java.lang.IllegalArgumentException: Request header is too large原因:请求头超过了 ...
这样入门asp.net core 之静态文件
本文章主要说明asp.net core中静态资源处理方案: 一.静态文件服务首先明确contentRoot和webroot这两个概念 contentRoot:web的项目文件夹,其中包含webroo ...
python取txt文件的若干行到另一个文件
取movie.txt文件的若干行到movie2.txt #取txt文件的若干行到另一个txt f1 = open(r'F:\movie.txt','rb') f2= open(r'F:\movie2 ...
selenium webdriver (python)大全
webdriver的简介硒2.0的主要新功能是集成的webdriver的API.webdriver的设计除了解决一些seleniumr-RC API的一些限制,与webdriver 的整合,将提供一 ...
Stackoverflow 最受关注的 10 个 Java 问题
Stack Overflow 是一个大型的编程知识库.在 Stack Overflow 中已经有数以百万计的问题,并且很多答案有着很高的质量.这就是为什么 Stack Overflow 的答案经常位于 ...
JAVA中正则表达式总结
昨天,我的朋友请教我正则表达式.我也好久没有写过正则表达式了,昨天刚好看了下如鹏网创始人杨中科老师关于正则表达式的讲解.使我加深了正则表达式的印像.现我把他总结下: 许多语言,包括Perl.PHP.P ...
python脚本对 mysql数据库进行增删改查操作
# -*- coding: utf-8 -*-import pymysqlimport xlrd# import codecsconn = pymysql.connect(host='127.0.0. ...
qtchooser
qtchooser 的配置目录: /usr/lib/x86_64-linux-gnu/qtchooser qtchooser 的真实配置目录: /usr/share/qtchooser qtchoos ...
Uber无人驾驶致命车祸翻案：6秒前已侦测到死者
此前有消息称,今年三月 Uber 无人驾驶汽车致命车祸是软件失误导致的.现在,美国运输安全委员会的事故初步调查报告给出了不同的说法. 从图中可见,黄色线以米为单位显示,橙色线显示了地图线路的中心,紫色 ...