康知网,虎胆龙威1国语,西安石油大学是几本
最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错,晚上下班后回去配置了一晚上,才终于把它配置好,所以就记录下来,以防后面再次踩坑。。
vue.js介绍
vue.js 是一个用于创建 web 交互界面的。其特点是
mint-ui介绍
mint ui是饿了么前端团队开源的基于 vue.js 的移动端组件库
特点是:
创建vue.js项目
首先根据vue官网给出的方法在本地创建一个vue项目
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev
配置mint ui 环境
接着根据mint ui的官网在项目中引入mint ui的环境
npm i mint-ui -s
然后在项目中的main.js文件引入所有组件
import vue from 'vue' import mintui from 'mint-ui' import 'mint-ui/lib/style.css' import app from './app.vue' vue.use(mintui)
好了根据官网所说的,以上代码便完成了 mint ui 的引入。
运行项目
最后根据官网的内容在app.vue里面写一个button组件看看
<template> <div id="app"> <mt-button @click.native="handleclick">按钮</mt-button> </div> </template> <script> export default{ el: '#app', methods: { handleclick: function() { this.$toast('hello world!'); } } } </script> <style> </style>
好了,环境搭建完成,我们来运行项目吧
npm run dev
然后就啪啪啪各种报错
解决错误
首先你需要在本地项目中安装css解释器
npm i css-loader style-loader -d
然后在build文件夹下面的webpack.base.conf.js文件里面配置如下代码
{ test: /\.css$/, include: [ /src/, '/node_modules/mint-ui/lib/' ], use:[ {loader:"style-loader"}, {loader:"css-loader"}, ] }
如果你报es2015之类的错误,则需要将.babelrc文件修改为:
{ "presets": [ ["es2015", { "modules": false }] ], "plugins": [["component", [ { "libraryname": "mint-ui", "style": true } ]]] }
最后运行
环境配置好后,我们最后再运行一下。
npm run dev
终于可以了,就此,环境配置完成。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论