首先安装各类插件

npm install vue-cli -g

vue init webpack demo

npm install iview --save

npm install less style-loader css-loader less-loader -D

 npm install iview-loader --save-dev

在demo\build\webpack.base.conf.js中的extensions



需要增加一个.less



在build/webpack.base.conf.js中的module， 改写平时 vue-loader 的配置，如下：



使用npm run dev运行

vue-li+webpack+iview构建项目步骤的更多相关文章

  1. webpack进阶构建项目(一)

    webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...

  2. VUE + vue-cli + webpack 创建新项目

    首先记录一下命令. 这是一个睿智新手的笔记. p.s.这是配置好环境以后的命令. ----------------------------------------------- $ npm insta ...

  3. vue构建项目步骤

    1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...

  4. [转]webpack进阶构建项目(一)

    阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解babel-loader加载器 6.理 ...

  5. VUE + vue-cli + webpack 创建新项目（2）

    上一篇其实没写完. 好吧这一篇其实也没啥. 就补充一些上一篇没写完的.(随时害怕笔记本丢失的人) 上一篇写完了登录验证的跳转,这一片首先补充一下接口(?). 在使用axios的过程中,我们家后台表示你 ...

  6. webpack进阶构建项目(一)：1.理解webpack加载器

    1.理解webpack加载器 webpack的设计理念,所有资源都是“模块”,webpack内部实现了一套资源加载机制,这与Requirejs.Sea.js.Browserify等实现有所不同. We ...

  7. Vue2+VueRouter2+webpack 构建项目实战（一）：准备工作

    环境准备 首先,要开始工作之前,还是需要把环境搭建好.需要的环境是nodejs+npm,当然现在安装node都自带了npm. 在终端下面输入命令node -v会有版本号出来.就说明安装成功了.输入np ...

  8. vue 概念与使用vue-cli脚手架快速构建项目

    vue 定义:是一套构建用户界面的渐进式框架,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合. 数据渲染机制: 核心: 响应式数据绑定 ...

  9. Vue.js：使用vue-cli快速构建项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先安装了vue和webpack,不知道怎么安 ...

随机推荐

  1. HTTP各版本的区别

    什么是HTTP和HTTPS? HTTP是浏览器与服务器之间以明文的方式传送内容的一种互联网通信协议. HTTPS是在HTTP的基础上主要基于SPDF协议结合SSL/TLS加密协议,客户端依靠证书验证服 ...

  2. PAT甲级——A1006 Sign In and Sign Out

    At the beginning of every day, the first person who signs in the computer room will unlock the door, ...

  3. <爬虫>用正则爬取B站首页图片

    import re import requests headers = { 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) Apple ...

  4. Js中获取时间 new date()的用法

    Js中获取时间 new date()的用法 获取时间: var myDate = new Date();//获取系统当前时间 myDate.getYear(); //获取当前年份(2位) myDate ...

  5. GitHub的使用问题记录

    1. github如何收藏和关注? github 中的star作用:star 的作用是收藏,目的是方便以后查找. watch 的作用是关注,目的是等作者更新的时候,你可以收到通知.fork 的作用是参 ...

  6. 全栈之路-微信小程序-架构总览

    第一阶段是用来学习小程序开发的,这个就相当于PC端的网站吧,只不过现在依靠微信强大的流量来将业务搬移到小程序中,对于企业来说,这是一种很好的发展方向,既减少了开发成本,又减少了推广成本,小程序是很被人 ...

  7. Ionic JPush极光推送二

    1.看图解决问题   2.解决出现统计代码提示问题 修改这个java 文件 导入命名空间 import cn.jpush.android.api.JPushInterface; 添加方法 @Overr ...

  8. uni-app中不使用scroll-view组件,监听页面滑直底部事件

    最终达到的目标效果 将要用到 监听页面滚动事件:onPageScroll 获取节点信息uni.createSelectorQuery() 标签布局 <template> <view ...

  9. N!中素因子p的个数 【数论】

    求N!中素因子p的个数,也就是N!中p的幂次 公式为:cnt=[n/p]+[n/p^2]+[n/p^3]+...+[n/p^k]; 例如:N=12,p=2 12/2=6,表示1~12中有6个数是2的倍 ...

  10. 二、Python安装和第一个程序

    <1.Python语言介绍1.官方介绍:Python 是一款易于学习且功能强大的编程语言. 它具有高效率的数据结构,能够简单又有效地实现面向对象编程.Python 简洁的语法与动态输入之特性,加 ...