首先安装各类插件

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. Vue数据双向绑定(面试必备) 极简版

    我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: ...

  2. 5 第k大元素

    原题网址:http://www.lintcode.com/zh-cn/problem/kth-largest-element/ 在数组中找到第k大的元素 注意事项 你可以交换数组中的元素的位置 您在真 ...

  3. 服务器IP配置功能实现小结

    1. 服务器网卡配置文件 /etc/sysconfig/network/ifcfg-***(eth0) linux-f1s9:/etc/sysconfig/network # cat ifcfg-et ...

  4. 08-2-if的其他写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. np一些基本操作1

    ##生成一个一维数组import numpy as np;nb7 = np.arange(0,100,2);print(nb7)print("======================== ...

  6. Windows API 第四篇 文件操作

    创建或打开文件(也可用于打开管道,油槽,硬件设备等): HANDLE CreateFile( LPCTSTR lpFileName, // file name DWORD dwDesiredAcces ...

  7. 09.Hibernate中的事务与并发

    事务1. 什么是事务 * 事务就是逻辑上的一组操作,组成事务的各个执行单元,操作要么全都成功,要么全都失败. * 转账的例子:冠希给美美转钱,扣钱,加钱.两个操作组成了一个事情! 2. 事务的特性 * ...

  8. DataSourceUtils（使用C3P0连接池的工具类）

    一.导入jar包(c3p0-0.9.1.2.jar) 2.添加配置文件(放在src下) 配置文件的名称:c3p0.properties 或者 c3p0-config.xml 放在src之下 c3p0. ...

  9. Mysql--数据表碎片优化方法

    碎片产生原因: 大量批量插入和删除操作数据库,基于线性表的顺序存储结构的特点,出现了大量的空间碎片.一.优化步骤: 1.查看整库的情况 2.方便优化 3.整库所有表, 包含行数 索引长度 碎片空间 二 ...

  10. JEECG-Boot 开发环境准备（一）：技术点

    需要掌握的基础知识 序号 知识点 资料 1 Npm 命令 http://www.runoob.com/nodejs/nodejs-npm.html 2 Node.js 入门 http://www.ru ...