开发前准备

1,根据官方指引,构建项目框架

    安装vue
npm install vue@2.1.6 全局安装 vue-cli
npm install --global vue-cli 创建一个基于 webpack 模板的新项目my-project
vue init webpack my-project 进入项目目录
cd my-project 安装依赖,走你
npm install 运行项目
npm run dev

2,使用webpack+ sass 来写css

less是一门css预处理语言,它是拓展了css,增加了变量,Mixin等等。使用sass需要安装sass服务,sass-loader用来打包时用,

想要将sass正确解析成css当然还需要style-loader和css-loader。loader是webpack重要的功能之一,通过使用不同的loader,

webpack可以使用外部脚本或工具处理不同格式类型的文件,如通过sass-loader处".sass"文件。

首先安装:

npm install sass --save-dev
npm install style-loader css-loader sass-loader --save-dev

3,LESS/Sass 编译工具Koala介绍

koala是一个国产免费前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。

转载:https://www.jianshu.com/p/d87d7140944e/             vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程

   https://www.cnblogs.com/chen-cong/p/8323958.html    webpack---less+热更新 使用

Vue实例:vue2.0+ElementUI框架开发pc项目的更多相关文章

  1. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之七 || API项目整体搭建 6.2 轻量级ORM

    更新 1.在使用的时候,特别是更新数据的时候,如果不知道哪里有问题,可以查看数据库 和 实体类 的字段,是否大小写一致,比如 name 和 Name 2.在使用Sqlsugar 的 CodeFirst ...

  2. Z从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之七 || API项目整体搭建 6.2 轻量级ORM

    本文梯子 本文3.0版本文章 前言 零.今天完成的蓝色部分 0.创建实体模型与数据库 1.实体模型 2.创建数据库 一.在 IRepository 层设计接口 二.在 Repository 层实现相应 ...

  3. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之六 || API项目整体搭建 6.1 仓储模式

    前言 1.@LearningCoding 小伙伴关于用Sqlsugar在mysql数据库上的研究成果: sqlsugarcore支持mysql等数据库,在DbContext里面只需要设置dbtype为 ...

  4. Z从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之六 || API项目整体搭建 6.1 仓储+服务+抽象接口模式

    本文梯子 本文3.0版本文章 前言 零.完成图中的粉色部分 2019-08-30:关于仓储的相关话题 一.创建实体Model数据层 二.设计仓储接口与其实现类 三.设计服务接口与其实现类 四.创建 C ...

  5. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之八 || API项目整体搭建 6.3 异步泛型仓储+依赖注入初探

    代码已上传Github+Gitee,文末有地址 番外:在上文中,也是遇到了大家见仁见智的评论和反对,嗯~说实话,积极性稍微受到了一丢丢的打击,不过还好,还是有很多很多很多人的赞同的,所以会一直坚持下去 ...

  6. Z从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之八 || API项目整体搭建 6.3 异步泛型仓储+依赖注入初探

    本文梯子 本文3.0版本文章 回顾 1.Sqlsugar 的使用 2.修改数据连接字符串 今天要完成的浅紫色部分 一.设计仓储基类接口——IBaseRepository.cs 二.将其他的仓储接口,继 ...

  7. Vuejs+elementUI框架开发的项目结构及文件关系

    项目结构|----- build #webpack编译相关文件目录,一般不用动 |----- config #配置目录|         |------ dev.env.js #开发环境变量| |-- ...

  8. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  9. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

随机推荐

  1. Windows 设置定时任务

    cmd 运行 control 命令打开控制面板,找到 管理工具 -> 任务计划程序 一.添加定时任务 创建任务 基本信息 触发器,这里设置开机启动 操作,这里执行一个程序.若为脚本,注意起始于路 ...

  2. springboot备忘

    1.springboot中有ApplicationRunner类,如果项目中的启动类名称也是ApplicationRunner,单元测试时需要注意:import不要import到springboot的 ...

  3. android 知识体系

  4. Break 和 Continue 标签 kotlin(12)

    Break 和 Continue 标签 在 Kotlin 中任何表达式都可以用标签(label ) 来标记. 标签的格式为标识符后跟 @ 符 号,例如: abc@ . fooBar@ 都是有效的标签( ...

  5. 判断List是否为空的问题

    今天公司安排给页面调试Bug,感觉公司人员写的判断判断List是否为空存在一定的问题,公司判断是list!=null这是完全不对的,这只会判断是否有list对象.如果为空,他也会执行if(list!= ...

  6. tomcat8踩坑:url包含|等特殊字符报错400的问题

    这个问题纠缠了我很久了,终于在今天早上解决了,感谢自己的不放弃和不断尝试的决心,我坚信,我可以找到解决方式!! 项目用的spring boot+spring security框架,关于统一错误页面在开 ...

  7. Why convolutions always use odd-numbers as filter_size

    原文地址:https://datascience.stackexchange.com/questions/23183/why-convolutions-always-use-odd-numbers-a ...

  8. Hibernate HelloWorld案例

    搭建一个Hibernate环境,开发步骤: 1. 下载源码 版本:hibernate-distribution-3.6.0.Final 2. 引入jar文件          hibernate3.j ...

  9. spring boot系列(一)spring boot 初识

    什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...

  10. springboot子模块 @Autowired无法找到其他模块的接口和类的解决方法

    在main的启动类上添加 @SpringBootApplication(scanBasePackages = {"com.shangsheng"})或者@ComponentScan ...