Vue实例:vue2.0+ElementUI框架开发pc项目
开发前准备
- vue.js2.0中文,项目所使用的js框架
- vue-router,vue.js配套路由
- vuex,状态管理
- Element,UI框架
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项目的更多相关文章
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之七 || API项目整体搭建 6.2 轻量级ORM
更新 1.在使用的时候,特别是更新数据的时候,如果不知道哪里有问题,可以查看数据库 和 实体类 的字段,是否大小写一致,比如 name 和 Name 2.在使用Sqlsugar 的 CodeFirst ...
- Z从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之七 || API项目整体搭建 6.2 轻量级ORM
本文梯子 本文3.0版本文章 前言 零.今天完成的蓝色部分 0.创建实体模型与数据库 1.实体模型 2.创建数据库 一.在 IRepository 层设计接口 二.在 Repository 层实现相应 ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之六 || API项目整体搭建 6.1 仓储模式
前言 1.@LearningCoding 小伙伴关于用Sqlsugar在mysql数据库上的研究成果: sqlsugarcore支持mysql等数据库,在DbContext里面只需要设置dbtype为 ...
- Z从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之六 || API项目整体搭建 6.1 仓储+服务+抽象接口模式
本文梯子 本文3.0版本文章 前言 零.完成图中的粉色部分 2019-08-30:关于仓储的相关话题 一.创建实体Model数据层 二.设计仓储接口与其实现类 三.设计服务接口与其实现类 四.创建 C ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之八 || API项目整体搭建 6.3 异步泛型仓储+依赖注入初探
代码已上传Github+Gitee,文末有地址 番外:在上文中,也是遇到了大家见仁见智的评论和反对,嗯~说实话,积极性稍微受到了一丢丢的打击,不过还好,还是有很多很多很多人的赞同的,所以会一直坚持下去 ...
- Z从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之八 || API项目整体搭建 6.3 异步泛型仓储+依赖注入初探
本文梯子 本文3.0版本文章 回顾 1.Sqlsugar 的使用 2.修改数据连接字符串 今天要完成的浅紫色部分 一.设计仓储基类接口——IBaseRepository.cs 二.将其他的仓储接口,继 ...
- Vuejs+elementUI框架开发的项目结构及文件关系
项目结构|----- build #webpack编译相关文件目录,一般不用动 |----- config #配置目录| |------ dev.env.js #开发环境变量| |-- ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- Vue2.0+ElementUI+PageHelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
随机推荐
- Windows 设置定时任务
cmd 运行 control 命令打开控制面板,找到 管理工具 -> 任务计划程序 一.添加定时任务 创建任务 基本信息 触发器,这里设置开机启动 操作,这里执行一个程序.若为脚本,注意起始于路 ...
- Vue -3:单文件组件
在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规 ...
- 编写 Model 层的代码
创建 App 这里把所有 Model 划分为三类:blog 相关.配置相关和评论相关.这么分的好处是便于独立维护各个模块,也便于在开发时分配任务. blog App 创建一个名为 blog 的 app ...
- Java 谷歌浏览器开发必备插件
1.谷歌访问助手 下载网址:http://www.ggfwzs.com/ 2.Json Viewer 格式化请求接口,返回Json数据格式,可以在浏览器展示 3.Restlet client 一种类似 ...
- Extjs4 修改combox中store的数据
{ xtype: "combo", fieldLabel: '选择模板', name: "TemplateType", fieldName: "Tem ...
- C基础知识(6):指针--函数指针与回调涵数
函数指针 函数指针是指向函数的指针变量. 通常我们说的指针变量是指向一个整型.字符型或数组等变量,而函数指针是指向函数. 函数指针可以像一般函数一样,用于调用函数.传递参数. #include < ...
- PHP $_SERVER超全局变量
$_SERVER是php中的超全局变量,一个包含了诸如头信息(header).路径(path).以及脚本位置(script locations)等等信息的数组.这个数组中的项目由 Web 服务器创建. ...
- 已经配置好了的 jmeter + ant 框架
已经配置好了的 jmeter + ant 框架 ,需要自取,避免查找安装攻略时耗费时间 使用前需配置环境变量,阅读文件内安装文档!!! 链接:https://pan.baidu.com/s/1eRz9 ...
- flask_script
Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...
- Vue 项目结构介绍
Vue 项目创建完成后,使用 Web Storm 打开项目,项目目录如下: build 文件夹,用来存放项目构建脚本 config 中存放项目的一些基本配置信息,最常用的就是端口转发 node_mod ...