基于Vue移植构建后台控制系统(一)

一、背景与目的

1.1 项目相关

原项目是一个基于AngularJS构建的工程——直接复用其他项目的代码——由于对AngularJS所知不多(而且AngularJS学习成本相对较高),虽然可以照葫芦画瓢完成一定的功能开发,但是灵活性却差了很多,而且一些非功能性的bug也解决不了。

Others:控制台又打不开了...
Me:我看看,嗯,这个是AngularJS的问题,重新输入URL刷新一下就好了;
Others:把这个问题解决一下呗,每次都要重新搞一下...
Me:额,这个不会解呀!(好尴尬呀...)
----------------------------------------------------------------------------------
 Others:控制台出问题了,全是乱码...
Me:我看看,嗯,这个不是乱码,是代码直接显示了,应该是AngularJS的问题,清一下缓存就可以了;
Others:这个问题一定要解决的吧,都乱码了...
Me:这个不是乱码,额,这个也不会解呀!(好尴尬呀...)

如此场景出现太多,作为一位开发,总会有不好意思的时候!

1.2 技术相关

Vue太火,不解释!
Vue相对比较简单,不解释!
Vue和AngularJS一样,有对应的路由系统,比较适合开发单页面应用(后台控制系统是典型的单页面应用)

二、起步——了解Vue语法

Vue的学习和JS的学习其实并没有太大的区别:
第一阶段学习完基础的语法就可以出发了;
第二阶段学习使用一些三方工具或者三方库来快速开发;
第三阶段需要学会使用一些模块化的开发,重构提炼更多的公共代码;
第四阶段学会能够使用一些比较高级的语法或技巧来更简洁的完成功能开发;
第五阶段成为能够提供好的三方库组织中的一员。
了解Vue有3个月了,目前第二阶段末尾和第三阶段开始。

2.1 官网教程笔记

基础语法的学习,直接官网就可以,这里只是一个小小的大纲,详情请移步Vue官网:http://cn.vuejs.org/v2/guide/index.html
2.1.1 基础

1、Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM;
2、双向数据绑定;
3、组件化;
-------------------------------------------------------------------
4、Vue实例的属性和方法;(data、method)
5、Vue实例的声明周期;(mounted)
-------------------------------------------------------------------
6、模板语法:
    6.1、文本:插值{{}}、v-html;
    6.2、属性:v-bind:、:;
    6.3、指令、修饰符、过滤器;
    6.4、常用指令:v-bind:class、v-bind:style、v-module、v-if、v-show、v-for、v-on:click;
-------------------------------------------------------------------
7、计算属性;(computed、watch)
-------------------------------------------------------------------
8、组件:
    8.1 全局注册;
    8.2 局部注册;
    8.3 模板解析is;
    8.4 父子组件:props down, events up ;
    8.5 内容分发:slot;
    8.6 组件三部分:
        8.6.1 Props 允许外部环境传递数据给组件
        8.6.2 Events 允许组件触发外部环境的副作用
        8.6.3 Slots 允许外部环境将额外的内容组合在组件中

三、Hello World

其实在学习Vue基础的过程中,就应该完成了Hello World的过程,然而这里强调Hello World主要基于两个方面:

1、Vue中Hello World的真意
    1.1 通过Hello World学习实践基本语法以及写法;
    1.2 用最简单的代码完成最简单最单一的功能;(区别于vue-cli)

2、脚手架Vue-cli
绝大多数人刚开始接触Vue,便走上了Vue-cli搭建项目的道路主要基于几个方面的原因:
    2.1 Vue-cli作为官方脚手架,太容易从官网中脱颖而出;
    2.2 大型项目用脚手架搭建比较方便;
    2.3 而小项目其实也没有太大的必要用Vue了;
    2.4 对于基于有成的(马上做项目)来说,直接进入脚手架的节奏更快一些。

至于Vue-cli的具体操作:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

四、更多期待——
基于Vue移植构建后台控制系统(二)——Vue全家桶。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 有一种坚持叫做“复盘”邢晨-Day20 昨天晚上进行了小考试,其实感觉自己表现还是不够好,还应该再更主动的去交流,...
    邢晨_sherry阅读 161评论 0 0
  • 1 用作来找存在感 2 让所有人知道你的梦想 3 挽留要走的人 4 在意痛苦 夸大压力 5 轻易相信承诺 6 把...
    Q弹椅子肉阅读 318评论 0 3
  • 在iOS开发的一篇推送中, 发现了好多面试题, 仔细看了看, 好多都答不上来, 先把这些记下来, 慢慢找到答案吧 ...
    喵呜呜喵阅读 166评论 0 0
  • 由于自己有前端基础,实话说这个练习对我来说意义不大。。。然后也比较懒,就完成作业为主了。 最终页面效果 html代码:
    星罹阅读 115评论 0 0
  • 每个人都会有很多时候觉得自己过的比别人好,并不是因为自己拥有多少东西,这种感觉来源于对现在生活的满足,就像在自己恋...
    荷西哈阅读 193评论 0 0