在Vue2.0中对mint-ui进行配置时需要注意哪些问题 - 行业资讯

　　介绍

今天就跟大家聊聊有关在Vue2.0中对mint-ui进行配置时需要注意哪些问题,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强> vue.js介绍

Vue。js是一个用于创建网络交互界面的。其特点是

<李>

简洁HTML模板+ JSON数据,再创建一个Vue实例,就这么简单。

<李>

数据驱动自动追踪依赖的模板表达式和计算属性。

<李>

组件化用解耦,可复用的组件来构造界面。

<李>

轻量~ 24 kb分钟+ gzip,无依赖。

<李>

快速精确有效的异步批量DOM更新。

<李>

模块友好通过NPM或凉亭安装,无缝融入你的工作流。

Vue。js中文官网

<强> mint-ui介绍

薄荷UI是饿了么前端团队开源的基于Vue。js的移动端组件库

特点是:

<李>

薄荷UI包含丰富的CSS和javascript组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

<李>

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。

<李>

考虑到移动端的性能门槛,薄荷UI采用CSS3处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。

<李>

依托Vue。js高效的组件化方案,薄荷UI做到了轻量化。即使全部引入,压缩后的文件体积也仅有~ 30 kb (js + CSS) gzip。

薄荷UI中文官网

<强>创建Vue。js项目

首先根据vue官网给出的方法在本地创建一个vue项目

#,全局安装,vue-cli 　　美元,npm install ——global vue-cli 　　#,创建一个基于,webpack 模板的新项目　　美元,vue init webpack 我的项目　　#,安装依赖,走你　　美元,cd 我的项目　　美元,npm 安装　　美元,npm run dev

<强>配置薄荷UI环境

接着根据薄荷UI的官网在项目中引入薄荷UI的环境

npm 小姐:mint-ui s

然后在项目中主要的。js文件引入所有组件

import Vue 得到& # 39;vue # 39; 　　import MintUI 得到& # 39;mint-ui& # 39; 　　import & # 39; mint-ui/lib/style.css& # 39; 　　import App 得到& # 39;。/App.vue& # 39; 　　　　Vue.use(进民退”)

好了根据官网所说的,以上代码便完成了薄荷UI的引入。

<>强运行项目

最后根据官网的内容在应用。vue里面写一个按钮组件看看

& lt; template> 　　,& lt; div id=癮pp"比; 　　,& lt; mt-button @click.native=癶andleClick"在按钮& lt;/mt-button> 　　& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　export 默认{ 　　,el: & # 39; #应用# 39; 　　,方法:{ 　　,,handleClick:函数(),{ 　　美元,才能这样。烤面包(& # 39;Hello 世界! & # 39;); 　　,,} 　　,} 　　} 　　& lt;/script> 　　　　& lt; style> 　　& lt;/style>

好了,环境搭建完成,我们来运行项目吧

npm run dev

然后就啪啪啪各种报错

在Vue2.0中对mint-ui进行配置时需要注意哪些问题

<强>解决错误

首先你需要在本地项目中安装CSS解释器

<代码> npm我css-loader style-loader - d

然后在构建文件夹下面的webpack.base.conf。js文件里面配置如下代码

{ 　　,,,测试:,/\ . css/美元, 　　,,,(包括:, 　　,,,,/src/, 　　,,,,& # 39;/node_modules/mint-ui/lib/& # 39;,, 　　,,,, 　　,,,使用:( 　　,,,,{装载机:“style-loader"}, 　　,,,,{装载机:“css-loader"}, 　　,,,) 　　,,,, 　　以前,,}

如果你报es2015之类的错误,则需要将。babelrc文件修改为:

{ 　　,“presets":, 　　(才能“es2015",, {,“modules": false }] 　　,), 　　,“plugins": [[“component",, ( 　　{才能　　,才能“libraryName":,“mint-ui" 　　,才能“style":真实　　,,} 　　,]]] 　　}

<>强最后运行

环境配置好后,我们最后再运行一下。

<代码> npm运行dev

终于可以了,就此,环境配置完成。

在Vue2.0中对mint-ui进行配置时需要注意哪些问题