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

随机推荐

k8s 各种网络方案 - 每天5分钟玩转 Docker 容器技术（170）
网络模型有了,如何实现呢? 为了保证网络方案的标准化.扩展性和灵活性,Kubernetes 采用了 Container Networking Interface(CNI)规范. CNI 是由 Core ...
React-----input中的value不更新 - 提问
原文:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...
系列博文-Three.js入门指南(张雯莉)-照相机
照相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式.而针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机.我们需要为自 ...
解决error while loading shared libraries的通用方案
1. 首先 find / -name libevent-1.4.so.2 找到缺少的链接文件到底在那儿. 2. LD_DEBUG=libs LD_DEBUG=libs /usr/local/bin/f ...
关于MySQL的1064错误
MySQL的1064错误是SQL语句写的有问题时出现的,即SQL的语法错误.笔者常常使用MySQL-python这个库来对MySQL进行操作,代码中报这个错误的一般是cursor.execute(sq ...
Java程序员必备的Intellij插件
以下是我用过不错的Intellij插件 1. .ignore 地址:https://plugins.jetbrains.com/plugin/7495--ignore 生成各种ignore文件,一键创 ...
Golang中使用lua进行扩展
前言最近在项目中需要使用lua进行扩展,发现github上有一个用golang编写的lua虚拟机,名字叫做gopher-lua.使用后发现还不错,借此分享给大家. 数据类型 lua中的数据类型与go ...
【prufer编码+组合数学】BZOJ1005 [HNOI2008]明明的烦恼
Description 自从明明学了树的结构,就对奇怪的树产生了兴趣...... 给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Solution 这 ...
用keras实现人脸关键点检测(2)
上一个代码只能实现小数据的读取与训练,在大数据训练的情况下.会造内存紧张,于是我根据keras的官方文档,对上一个代码进行了改进. 用keras实现人脸关键点检测数据集:https://pan.ba ...
Java集合--TreeSet详细解析
目录 1.构造函数 2.增 3.删 4.比较器总结谈到TreeSet的特点,估计大家脑海里想到的都是:有序,不可重复,红黑树,基于Treemap实现,自定义排序等特点.这篇博客帮助大家从源码梳理下 ...