虽然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脚手架从零搭建的更多相关文章

  1. 一步步构造自己的vue2.0+webpack环境

    前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...

  2. Vue2.0+Webpack项目环境构建到发布

    前言:为什么要用webpack搭建项目呢,因为这个工具可以把目前浏览器不全部支持的ES6语法,通过打包工具生成所有浏览器都支持的单个JS文件. 参考: https://blog.csdn.net/u0 ...

  3. vue2.0+webpack+vuerouter+vuex+axios构建项目基础

    前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,web ...

  4. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  5. Node + Express + vue2.0 + Webpack项目实践

    技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js 都写在 ...

  6. Vue2.0总结———vue使用过程常见的一些问题

    Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...

  7. Vue2.0学习--Vue数据通信详解

    一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...

  8. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

  9. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

随机推荐

  1. Centos 7 ip查看问题

    centos7已经没有ifconfig功能,现在使用的是命令ip addr查看,如果还是习惯ifconfig使用"yum -y install net-tools"命令进行安装 安 ...

  2. 实践作业2:黑盒测试实践——在被测系统上录制脚本 Day 5

    1.处理了学生信息管理系统运行的小细节 2.总结了katalon的使用流程如下 a.在Katalon Studio中创建一个自动化测试项目. b.创建一个测试案例,用来写入所有必要的测试步骤 c.编写 ...

  3. CCF-201403-2-窗口

    问题描述 试题编号: 201403-2 试题名称: 窗口 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平 ...

  4. 真正的精通Java是种什么样的境界?

    会在不适合使用java的地方不用java! 作为一名软件开发者,要追求的,应该是不断地提升自己分析问题把握事物关键点,实事求是地给出切实可行且能"一剑封喉"的优雅解决方案的能力,再 ...

  5. javascript设计模式——模板方法模式

    前面的话 在javascript开发中用到继承的场景其实并不是很多,很多时候喜欢用mix-in的方式给对象扩展属性.但这不代表继承在javascript里没有用武之地,虽然没有真正的类和继承机制,但可 ...

  6. Codeforces 869C The Intriguing Obsession

    题意:有三种颜色的岛屿各a,b,c座,你可以在上面建桥.联通的点必须满足以下条件:1.颜色不同.2.颜色相同且联通的两个点之间的最短路径为3 其实之用考虑两种颜色的即可,状态转移方程也不难推出:F[i ...

  7. CS Round#50 D min-races

    Min Races Time limit: 1000 msMemory limit: 256 MB   In a racing championship there are N racing driv ...

  8. Android注解方式实现表单校验

    在开发中总会遇到输入框的输入规则限制 比如 电话输入框电话号码的校验,密码规则的校验等 ,我们通常做法是提交操作时对每个输入框的输入内容进行校验,很多的if else ,代码看起来很乱,其实我们可以用 ...

  9. poj Minimum( CutStoer Wagner算法)

    Minimum Cut 题目: 给出一张图.要求你删除最小割权和图. 算法分析: ////////////////////     转载 --- ylfdrib   ///////////////// ...

  10. 微软Azure云计算服务主导全球

    10月20日,微软首席运行官(CEO)纳德拉(Satya Nadella)在美国旧金山对外宣布:将在澳大利亚建设数据中心.同一时候与大型IT企业美国戴尔和分散式处理系统服务商美国Cloudera等展开 ...