mintUI配合vue2.0,webpack,vue-cli脚手架从零搭建
虽然vue-cli脚手架很方便,但是有些配置还是不够,
所以个人配置了一个mintUI的移动端单页面模板,可以使用less,axios,mintUI等常用组件和loading.
还配置了一个elementUI的pc端单页面模板。
代码地址:https://gitee.com/LIULIULIU8/elementui_mintui__template_file
运行说明:
1、进入到文件夹,输入命令行:cnpm install 初始化下载
2、运行 cnpm run dev ;即可打开访问
好用给个star哦!!
步骤说明:
1.确保安装了vue-cli
安装:cnpm install vue-cli -g
验证版本:vue --version
2.生成项目模板:
vue init webpack-simple mintui-case-wxactivity
3.进入项目目录
初始化:cnpm install
运行:cnpm run dev
4.下载引入vueRouter,并使用
下载:cnpm install vue-router --save-dev
引入:import VueRouter from 'vue-router'
注册:Vue.use(VueRouter);
配置路径:
const routes = [
{path:'/',component:home}
];
const router = new VueRouter({
// linkActivity:'active',
routes:routes
})
5.初始化Vue
new Vue({
router:router,
el: '#app',
render: h => h(App)
})
6.安装使用mintUI
安装:cnpm install mint-ui -save
引入使用:
//引入全部组件
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css' //注意,此处样式要单独引入。
Vue.use(Mint);
//按需引入部分组件
import {Button} from 'mint-ui'
import 'mint-ui/lib/button/style.css'
Vue.component(Button.name,Button);
7.下载并使用less
安装:$ cnpm install less less-loader --save
配置webpack.config
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader'
},
8.下载并使用axios
安装:cnpm install axios --save
配置:在api文件中
使用:在某组件中,按需引入需要的接口请求 例:import {requestLogin} from '../api/'
main.js:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router' //引入全部组件
// import Mint from 'mint-ui'
// import 'mint-ui/lib/style.css'
//按需引入部分组件
import {Button} from 'mint-ui'
import 'mint-ui/lib/button/style.css'
Vue.component(Button.name,Button); // 引入组件
import home from './components/Home.vue'
//注册
Vue.use(VueRouter); const routes = [
{path:'/',component:home}
]; const router = new VueRouter({
// linkActivity:'active',
routes:routes
}) new Vue({
router:router,
el: '#app',
render: h => h(App)
})
webpack.config.js
var path = require('path')
var webpack = require('webpack') module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map' //开发模式时打开
} if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
mintUI配合vue2.0,webpack,vue-cli脚手架从零搭建的更多相关文章
- 一步步构造自己的vue2.0+webpack环境
前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...
- Vue2.0+Webpack项目环境构建到发布
前言:为什么要用webpack搭建项目呢,因为这个工具可以把目前浏览器不全部支持的ES6语法,通过打包工具生成所有浏览器都支持的单个JS文件. 参考: https://blog.csdn.net/u0 ...
- vue2.0+webpack+vuerouter+vuex+axios构建项目基础
前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,web ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- Node + Express + vue2.0 + Webpack项目实践
技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js 都写在 ...
- Vue2.0总结———vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...
- Vue2.0学习--Vue数据通信详解
一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...
- vue cli脚手架使用
1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
随机推荐
- 【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程
原文链接:http://www.cnblogs.com/shuoer/p/7779131.html 用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程 首先解释下什么 ...
- gitlab一键安装+配置(备份+LADP认证)
gitlab一键安装+配置(备份+LADP认证) #gitlab一键安装 #centos6 mini, GitLab社区版 #参考官方最新文档 https://www.gitlab.com.cn/in ...
- React 页面间传值的个人总结
react 组件之间传值的方案有很多,下面是我个人经验的总结 props 来传递值 传值方式: 通过props 获取值 通过props 提供的func去修改值 优点: 不需要任何第三方的组件,纯rea ...
- MYSQL瓶颈
一般来说, 在使用的时候 性能从某个数值开始.突然大大下降,说明就到了瓶颈期. mysql 瓶颈有2种,一种是 cpu瓶颈 一种是 io瓶颈.cpu瓶颈多是由io引起. 而io可以通过 show ...
- 【下一代核心技术DevOps】:(一)容器服务的Rancher选型
为什么说是下一代核心技术 其实经过互联网的多次变革说起,早期的C/S架构,到后来的B/S架构,一直到现在最普遍的M/S架构,他们的背后都是技术不断的优化改进,以适应促进IT技术的发展 整体而言在过去1 ...
- 利用模板template动态渲染jsp页面
一.场景 在js中写html简直是噩梦,刚进新公司,在codereview的时候得知可以通过将html模板写在jsp页面,然后由js调取模板,利用replace()方法替换传值的方式避免在js中拼接h ...
- java.util.ArrayList、java.util.vector和java.util.LinkedList (JDK 1.8.0_111)
一.java.util.ArrayList 1.1 ArrayList 继承结构 ArrayList实现了RandomAccess,可以随机访问(其实就是通过数组下标访问):实现了Cloneable, ...
- chrome解决http自动跳转https问题
1.地址栏输入: chrome://net-internals/#hsts 2.找到底部Delete domain security policies一栏,输入想处理的域名,点击delete. 3.搞 ...
- DocFX生成PDF文档
使用DocFX生成PDF文档,将在线文档转换为PDF离线文档. 关于DocFX的简单介绍使用DocFX生成文档 使用docfx 命令 1.下载 https://github.com/dotnet/do ...
- RPC-client异步收发核心细节?
通过上篇文章的介绍,知道了要实施微服务,首先要搞定RPC框架,RPC框架分为客户端部分与服务端部分. RPC-client的部分又分为: (1)序列化反序列化的部分(上图中的1.4) (2)发送字节流 ...