基于Vue2 搭建移动端 webapp 框架
Vue.js2.0作为国内热门并广为人知的前端框架,其与其他主流框架的优势在此不做过多赘述。搭建框架步骤如下:
转自;http://www.jianshu.com/p/beae26e57b0f
安装Node.js
搭建框架需要使用最新稳定版Node.js,请选择LTS版本。
tip1:如果本机有其它项目需要早期版本,建议利用NVM在本机分别部署多个版本的Node,以便在使用本框架时切换至最新稳定版即可。
tip2:无法翻墙的童鞋,建议使用cnpm,安装后在以下命令中将
npm
替换成cnpm
即可;
安装Git
运用vue-cli
本框架利用vue-cli脚手架快速搭建基础框架;
安装vue-cli
npm install -g vue-cli
使用webpack模板
vue init webpack my-project
本文示例运行于vue-cli(v2.8.1),命令行提示如下:
? Project name (my-project) //请输入项目名称,回车默认
? Project description (A Vue.js project) //请输入项目描述,回车默认
? Author xsl <398818817@qq.com> //请输入作者名,回车默认
? Vue build //请选择构建模式,请直接回车选择第一条
> Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific
HTML) are ONLY allowed in .vue files - render functions are required elsewhere
? Install vue-router? Yes //是否安装vue-router,回车
? Use ESLint to lint your code? Yes //是否安装ESLint代码检查器,回车
//个人比较偏爱airbnb的编码规范,此处选择第二项
Standard (https://github.com/feross/standard)
>AirBNB (https://github.com/airbnb/javascript)
none (configure it yourself)
? Setup unit tests with Karma + Mocha? Yes //单元测试,请按需选择
? Setup e2e tests with Nightwatch? Yes //端到端测试,请按需选择
如果对于eslint报错并不明白的,可以参考eslint官方文档提供ESLint代码检查规则索引;
安装vendor
本框架中需要利用vue-router作为前端路由,如果与本示例相同版本vue-cli,无需单独引入,在初始化时直接选择安装即可;
本框架中需要运用Vuex作为公用状态管理,这基于业务功能的复杂度,可选用,引入方式如下;
//请进入工程文档目录中运行以下命令
npm install vuex --save
本框架是运用于搭建移动端APP,选用饿了么移动端UI库——mint UI
//请进入工程文档目录中运行以下命令
npm install mint-ui --save
部分框架提升
ES6+新特性支持
由于webpack模板里的babel默认只选用了ES2015以及stage-2,对于需要使用其它ES新特性来说,所以我们可能需要添加新的依赖,并修改babel配置;
npm install babel-preset-es2016 -D
npm install babel-preset-es2017 -D
npm install babel-preset-stage0 -D
.babelrc修改presets属性如下
"presets": [["es2015",{ "modules": false }],
"es2016",
"es2017",
"stage-0",
"stage-2"]],
按需引入
安装babel-plugin-component
npm install babel-plugin-component -D
.babelrc修改plugins属性如下
"plugins":"plugins": ["transform-runtime",["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]],
这样我们就不必在需要在组件内单独引用mint UI样式。
webpack
我们选用的打包工具为webpack,正如你看到我们选用的是webpack的模板,虽然大量通用性配置已经配好,即使你不了解它并不会对使用框架产生影响,但作者还是建议你去了解他,特别是作者独家提供了中文版webpack2新手指南
基于Vue2 搭建移动端 webapp 框架的更多相关文章
- 第二篇 基于.net搭建热插拔式web框架(沙箱的构建)
上周五写了一个实现原理篇,在评论中看到有朋友也遇到了我的问题,真的是有种他乡遇知己的感觉,整个系列我一定会坚持写完,并在最后把代码开源到git中.上一篇文章很多人看了以后,都表示不解,觉得不知道我到底 ...
- 第三篇 基于.net搭建热插拔式web框架(重造Controller)
由于.net MVC 的controller 依赖于HttpContext,而我们在上一篇中的沙箱模式已经把一次http请求转换为反射调用,并且http上下文不支持跨域,所以我们要重造一个contro ...
- 基于.net搭建热插拔式web框架(实现原理)
第一节:我们为什么需要一个热插拔式的web框架? 模块之间独立开发 假设我们要做一个后台管理系统,其中包括“用户活跃度”.“产品管理”."账单管理"等模块.每个模块中有自己的业务特 ...
- 第五篇 基于.net搭建热插拔式web框架(拦截器---请求管道)
好了,前边我们把核心内容介绍完了,接下来要做的就是拦截用户的请求,并把请求转向沙箱内. 这里我们准备通过实现一个HttpModule类来完成请求的拦截与转发.新建一个HuberHttpModule类, ...
- 基于webpack搭建的vue+element-ui框架
花了1天多的时间, 终于把这个框架搭建起来了. 好了, 不多说了, 直接进入主题了.前提是安装了nodejs,至于怎么安装, 网上都有教程. 这里就不多说了, 这边使用的IDE是idea.1.在E:/ ...
- asp.net -mvc框架复习(7)-基于MVC搭建用户登录项目框架
整体框架: 一.搭建Model层 1.添加通用数据访问类 2.添加实体类(封装和传递数据,和数据库中数据表对应) 3.添加数据访问类(通常和实体类同名,但是后缀名发生改变) 二.搭建控制器层Contr ...
- 基于mpvue搭建小程序项目框架
简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序 ...
- vue2.x移动端ui框架选型
前言 最近公司准备做移动端spa项目,需要选一个ui框架.优先考虑谷歌Material Design设计风格.针对市面上的框架进行了一次调研,简单总结如下. 选型原则:1. 优先考虑md风格. 2. ...
- 第四篇 基于.net搭建热插拔式web框架(RazorEngine实现)
在开头也是先给大家道个歉,由于最近准备婚事导致这篇文章耽误了许久,同时也谢谢老婆大人对我的支持. 回顾上篇文章,我们重造了一个controller,这个controller中用到了视图引擎,我们的视图 ...
随机推荐
- 总结·CSS3中定位模型之position属性的使用方法
一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...
- Redis数据类型之Set
前言:set类似于数学上面的集合概念,包含的元素无序,不能重复,能进行交.并.差操作. 一.内部原理 set数据结构,也是随着元素数目的多少而变化.当set中添加 ...
- .Net Mvc Automated Migration 数据迁移
1.打开程序包管理器控制台 PM> enable-migrations –EnableAutomaticMigration:$true 2.项目工程文件中会生成Migrations文件夹 3.找 ...
- css3特效详解
好吧,CSS3 3D transform变换,不过如此! 这篇文章发布于 2012年09月7日,星期五,01:05,归类于 css相关. 阅读 408042 次, 今日 34 次 一.写在前面的秋裤 ...
- MVC之前-ASP.NET初始化流程分析1
Asp.net Mvc是当前使用比较多的web框架,也是比较先进的框架.我打算根据自己的实际项目经验以及相关的源码和一些使用Asp.net Mvc的优秀项目(主要是orchard)来说一说自己对于As ...
- 遇到ANDROID “call to opengl es api with no current context”错误
延迟线程执行 Timer timer=new Timer();//实例化Timer类 timer.schedule(new TimerTask(){ public void run(){ buyed( ...
- 9.session的生命周期
1.创建 当客户端第一次访问某个jsp或者Servlet的时候,服务器会为当前会话创建一个SessionId,每次客户端向服务端发送请求的时候,都会将此SessionId携带过去,服务端会对此Sess ...
- solr的基本概念
一.solr的基本概念 大家可以把solr搜索引擎看成一个数据库,不过是基于内存的.它可以存储信息,并且根据你的查询条件返回你想要的信息. 1.collection和core的概念 collectio ...
- 初学spring boot踩过的坑
一.搭建spring boot环境 maven工程 pom文件内容 <project xmlns="http://maven.apache.org/POM/4.0.0" xm ...
- ExtJs异步无法向外传值和赋值的解决办法,亲测有效
1.Ext.data.Store.load();方法是异步的,下面的方式获得的reCount始终是0,因为还没等后台的方法执行完就赋值了,此时store的record还没获得值. var testSt ...