每晚下班后学习两个小时,提交原则

现在是 2016 年 12 月 31 日晚,很高兴自身未曾猝死

Vue-loader 是什么?

介绍

在非常多Vue项目中,大家采取 Vue.component 来定义全局组件,紧接着用new Vue({ el: '#container '}) 在各类页面内钦赐叁个容器成分。

这种方案在只是使用 JavaScript 巩固有个别视图的中Mini项目中展现得很好。但是在更目不暇接的品类中,只怕当你的前端完全使用 JavaScript 驱动的时候,以下缺陷就显现出来:

  • 全局定义(Global definitions) 强制须要各样 component 中的命名不得另行
  • 字符串模板(String templates) 缺少语法高亮,在 HTML 有多行的时候,需求运用丑陋的
  • 不扶助CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 显明被遗漏
  • 尚未创设步骤(No build step) 限制只好选择 HTML 和 ES5 JavaScript, 而不能够选用预管理器,如 Pug (formerly Jade) 和 Babel

文本扩大名称叫 .vue 的 single-file components(单文件组件) 为以上所不不荒谬提供了缓和方法,而且还是能运用 Webpack 或 Browserify 等营造筑工程具。

那是贰个文件名叫 Hello.vue 的简短实例:

图片 1

今后我们获取:

  • 完整语法高亮
  • CommonJS 模块
  • 组件化的 CSS

正如作者辈说过的,大家得以运用预管理器来营造简洁和意义更丰裕的零件,举例Jade,Babel (with ES二零一五 modules),和 Stylus。

图片 2

那一个特定的语言只是例证,你能够只是简短地采用Buble,TypeScript,SCSS,PostCSS - 或然其余任何能够辅助你进步生产力的预管理器。

接纳 Vue 开拓单页应用全战略

网地点有比相当多有关怎么着使用 Vue 开垦单页应用的课程,从 Vue-cli 的采纳到 Vue router 的配,也是十分的详细。不过却不曾对一一须求的知识点做扩充,再拉长本事的新故代谢也是几何倍的,所以以后决定写一多种有关怎样开端开荒Vue 单页应用的战术,希望对各大热爱学习的心上人有所支持,相同的时间若是写的有哪些狼狈的地方希望指正。感谢。

概况

在线地址:http://www.kancloud.cn/jsfront/month/82796 JS前端开垦群月报

付出原则:

  • 本领作品新的为主。
  • 在此以前的稿子,比较优良的也足以交到。
  • 如何提交月报

想弥补耽误的几年,过去一年里,作者差不离从来坚称着 9117(星期五至周五每天 9 点半至 11 点半,周天、日 12 点 至 24 点)。

vue-loader 是贰个加载器,能把之类格式的 Vue 组件转化成JavaScript模块。

起步

一、知识储备

0110月份前端财富共享

二零一六 年 8 月 1 日,刚入职衡阳一家船只创设国有集团的第八天,笔者就调控做改行的妄想,开始前端学习之旅。每晚下班后学习多少个小时,用了三个月,把最基础的 HTML, CSS, JavaScript,到 Git, Gulp, Less, Node 过了贰回。9 月中投了 5 份简历试试水,很幸运的得到了多少个面试机缘并获得了 offer。

图片 3

针对刚接触 JavaScript 模块开采种类的顾客

有了 .vue 组件,大家就进来了尖端 JavaScirpt 应用领域。若是您从未备选好的话,意味着还需求学会使用一些增大的工具:

  • Node Package Manager (NPM): 阅读 Getting Started guide 直到 10: Uninstalling global packages章节.

  • Modern JavaScript with ES2015/16: 阅读 Babel 的 Learn ES2015 guide. 你不必要立时记住每一个情势,但是你能够保存这几个页面以便早先时期参照他事他说加以考察。

在您花一些年华精晓这么些能源之后,大家提出你参照他事他说加以考察 webpack-simple 。只要根据提醒,你就能够相当的慢的运维三个用到 .vue 组件,ES2015 和 热重载( hot-reloading ) 的Vue项目!

以此模板使用 Webpack,多少个能将三个模块打包成最后采用的模块打包工具。 那些录像介绍了Webpack的更加多相关消息。 学习了这几个基础知识后, 你可能想看看 这个在 Egghead.io上的 高级 Webpack 课程.

在 Webpack中,每种模块被打包到 bundle 从前都由八个应和的 “loader” 来转变,Vue 也提供 vue-loader 插件来举办 .vue 单文件组件 的转变. 那几个 webpack-simple 模板已经为您打算好了具有的事物,不过假若你想打听越多关于 .vue 组件和 Webpack 如何一同运营的新闻,你能够翻阅 vue-loader 的文档。

EcmaScript 6

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在二零一五年二月典型发表了。它的靶子,是驱动 JavaScript 语言能够用来编排复杂的大型应用程序,成为企业级开垦语言。

ES6 相对于它原先的版本可谓是奋进,新扩大了块功效域、箭头函数、Class、Promise、Module 以及 N 多的新特征和语法。况且没有要求操心差异浏览器对 ES6 的包容性难点,你能够放心的利用 Babel 或 TypeScript 来管理各类难题。

上学 ES6 语法中相比常用的一些推荐看如下文章:

30分钟了然ES6/ES二零一六主题内容

学习 ES6 的整整特色推荐阮一峰开源的书籍

ECMAScript 6 入门

1. Javascript 175453545

  • 前面一个技能种类大局观
  • ES6 Generator介绍
  • ES6 适配地址
  • 也谈JavaScript数组去重
  • 那是一篇傻瓜都能看懂的Promises小说!
  • ECMAScript® 2017 Language Specification
  • 雄辩的 js
  • airbnb 编码规范
  • ECMAScript 6 入门
  • Standard ECMA-262 5.1 Edition / June 2011
  • ECMAScript® 2017 Language Specification
  • 深入显出ES6
  • JavaScript全栈教程
  • Ecma Script compatibility table(es适配表)
  • ECharts 水球图 Liquid Fill Chart
  • 何以兑现一个LazyMan?
  • V8 Object 内部存款和储蓄器结构与质量访谈详解
  • 二零一四前端开辟手艺年度最全盘点
  • 二零一七年前端前景怎么着?
  • api开拓会集网站
  • 在浏览器上创造的上传图片

摆荡了三个月之后,二零一六 年 10 月 27 日,正式入职

vue-loader 提供了一部分非常绚烂的风味:

本着高等顾客

任凭你更青睐 Webpack 或是 Browserify,大家为简易的和更眼花缭乱的项目都提供了某些文书档案模板。大家建议浏览 github.com/vuejs-templates,找到您要求的有的,然后参照他事他说加以考察README 中的表达,使用 vue-cli 工具生成新的类型。

Webpack 中,每一个模块在创设前被加载器调换,Vue 官方插件 vue-loader 用来变化 .vue单文件组件。 webpack-simple 模板已经计划好了全方位, 如若要越多领悟 .vue 如何和 Webpack 合营专门的学业, 请看 vue-loader 文档


原文: 

Sass

Sass 是一款强化 CSS 的辅助理工科程师具,它在 CSS 语法的根底上加码了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高端功用,那么些进展令 CSS 更抓好大与高雅。使用 Sass 以及 Sass 的样式库(如 Compass)有支持更加好地公司管制体制文件,以及更加高效地付出项目。

Sass 能够让你像开拓的确的管理器语言般开辟你的 CSS。什么,你想将常用的 CSS 封装成贰个函数,或许延续上叁个 CSS 的样式?没难题,使用 Sass 就足以减轻了。当然,一样能够的还应该有 Less 和 Stylus,这里不做研商。

Sass 官网:

Sass

2. 移动微信小程序Javascript开垦 群号:148257606

  • fritx - 微信个人号/大伙儿号相关项目整理 (wechat/weixin/wx)
  • sunxuening - 微信个人号/民众号相关品种整理 (wechat/weixin/wx)
  • justjavac - 微信小应用能源集中整理
  • Aufree - 微信小应用财富集中整理
  • 小程序百货店
  • 有哪些微信小程序值得推荐介绍?
  • 微信小程序简易教程
  • 微信小程序会对如何公司产生冲击?
  • 微信小程序支付入门教程
  • 微信小程序开源项目库集结
  • 华夏人会对什么样塞尔维亚人常用的 App 惊叹「老外竟然有这些须求」?

试用期已经布署好疯狂学习一个月。主动百折不挠着 9117。这段时光里,除了熟稔业务,作者补偿了一部分基础知识,学习了 Angular。

  1. ES二零一四默许同用;
  2. 在各种 Vue 组件内帮忙其余的 Webpack 加载器,如用于<style>的 SASS 和用来<template> 的 Jade。
  3. 把 <style> 和 <template> 内援引的静态能源作为模块注重项对待,并用Webpack 加载器管理。
  4. 对每一种组件模拟有效能域的CSS。
  5. 开辟阶段援助组件的热加载。

二、早先利用脚手架

使用 Webpack 搭建过项目标人自然知道,光是 webpack.config.js 和 package.json 的安排就十一分的纷纭了,更别提别的的各类文件了。谢谢 Vue-cli 使那全部变得老大的简要,接下去介绍一下什么运用 Vue-cli 搭建开辟条件。

  1. 全局安装 vue-cli
cnpm install -g vue-cli
  1. 初始化 Vue 项目
vue init webpack my-project
  1. 进入 my-project
cd my-project
  1. 安装 node_modules
npm install
  1. 运维项目
npm run dev

第五步之后等待几分钟,就能自行张开 localhost:8080,你拜谒到三个 Vue 项目搭建成功的页面。因为墙内使用 NPM 会相当的慢,推荐应用阿里的镜像,只要求设置:

npm install -g cnpm --registry=http://registry.npm.taobao.org

然后接纳 cnpm 来代替 npm 即可。

3. Html5

试用期之后,感觉温馨简单的学问,应付工作如故困难,于是又乐得地坚持9117 七个月。大年后本太子插足了八个斩新的门类,使用 Vue + PostCSS + Webpack。作为壹人初学者,笔者这几个讲究此番时机。

简轻便单的话,webpack 和 vue-loader 的构成为您创作Vue应用的贰个更提高、越来越灵活的最为庞大的前端开拓形式。

二、配置文件介绍

日常性使用脚手架工具搭建之后会你会发掘开辟条件有近 100M 的高低,不用想念,平日都以因为老是实践 cnpm install 时发生的 node_module 文件,而生育景况中没有须要考虑。

这里介绍多少个常用的文本,其余的安排文件有意思味的话能够翻阅有关的牵线文章。

4. CSS 群号:578901836

  • CSS3渐变制作花边
  • BEM观念之根本弄清BEM语法

3, 4 月,尝试着写二个监测属性别变化化的库和二个归纳的 MVVM 框架。这段时日小编找到了造轮子的高兴,于是决定 9117 制度延十7月一年。

Webpack 是什么?

webpack.base.config.js

build 目录下的 webpack.base.conf.js 是用来安顿首要的 Webpack 编写翻译入口、输出路线、命名准则等等。同期在目录下还应该有webpack.dev.conf.js(开采条件布署) 和 webpack.prod.conf.js(生产条件安顿)。

5. Angular 群号:238251402

  • Angular 2.x 从0到1
  • TypeScript 入门教程

5 月,参加了另三个施用 Vue 的门类。业余时间,作者开端攻读 Vue 的源码,主若是响应系统。为了便利单独学习和平运动用,小编把 Vue 的响应系统剥离了出去(地址: ob.js)。

若果您熟识 Webpack 那就跳过那有的吧,但对于那三个菜鸟们,请看下那一个大致介绍吧:

dev-server.js

build 目录下的 dev-server.js 配置了开支中间件 webpack-dev-middleware 和热载中间件 webpack-hot-middleware,同时挂载代理服务器,配置静态财富等等。你可见修改 var uri = 'http://localhost:' + port 代码来安装暗中同意的拜望路线(默感觉:localhost:8080)。

6. React, Webpack 群号:530415177

  • React

    • React Native能源聚焦
    • React Native 高素质学习材料汇聚
  • Webpack

    • webpack官方汉语版
    • 从 webpack v1 迁移到 webpack v2

6 月,开端攻读 Virtual-DOM,并愿意尝试结合 JavaScript 表明式和 JsonML ,达成跨平台渲染(地址: eJsonML)。幸运的是,这些项目长足接受了 JsonML 作者 Stephen McKamey 的 star 。

Webpack 是二个模块打包工具。在开辟中,它把一群众文化艺术件中各类都看成二个模块管理,找寻它们间的借助关系,并打包成待揭橥的静态财富。

config/index.js

config 文件夹上面主题的主题素材,在本文件你可以布置项目标 build 的目录和文件名。同一时间,也足以配备开采条件的 proxy,用反向代理消除跨域难题。

  1. 生育情状的计划
env: require('./prod.env'),
// 生成入口文件 index.php 的打包路径
index: path.resolve(__dirname, '../dist/index.php'),
// 生成的文件夹名称(dist)
assetsRoot: path.resolve(__dirname, '../dist'),
// 静态资源文件名称(static)
assetsSubDirectory: 'static',
// index.php 文件引用资源的相对路径
assetsPublicPath: '/',
  1. proxy 的配置
// 使用 interface 来配置 API,就相当于 http://your.server.com/interface
proxyTable: {
  '/interface': {
    // 目标服务器地址
    target: 'http://your.server.com',
    changeOrigin: true,
    secure: false
  }
}

尤其切实的布置请参照他事他说加以考察:

vue-cli的webpack模板项目安插文件深入分析

7. Vue 群号:364912432

  • [vue最新实战] gank客户端(vue2 + vue-router2 + vuex +webpack+ es6)新手福利,干货多多
  • Vue2.x:基于Vue2的饿了么实战计算
  • 二〇一四自个儿的心路历程:从 Vue 到 Webpack 到 iView
  • iView - 一套基于 Vue.js 的高素质 UI 组件库
  • 一个用于快捷支付产品的简练、温婉、高效的 Vue 组件库

好景非常短,8 月初,因专门的工作索要,笔者担当独立开发一款 Android 扫码软件。从前并不曾 Android 或 Java 基础,于是中断了 eJsonML 和 Vexil 的付出。拿出成套精力,学了 1 天的 Java,2 天的 Kotlin,3 天的 Android,一周的 WranglerxJava, Dagger2, Firebase 等,做了个在线记事本的 德姆o,第三周开首开采,第五周上线,成就感须臾间爆棚。

图片 4

三、怎么样设置七个 NPM Package

自己想要安装 CSS Package

  1. 首先步,找到本身想要的插件(比如 normalize.css)
  2. 在指令行中敲下: cnpm install normalize.css --save-dev
  3. 在 main.js 中引用: import 'normalize.css'

自己想要安装 JS Package

  1. 先是步,找到自身想要的插件(比方 normalize.css)
  2. 在命令行中敲下: cnpm install normalize.css --save-dev
  3. 使用 axios 来引用 axios 插件 import axios from 'axios'
  4. 依据必要在大局绑定 Vue.prototype.$http = axios;

那般您就足以在 Vue 组件中使用 this.$http.get 或者 this.$http.post 来央求数据了,当然还应该有 put、jsonp、delete 等艺术和配备,这里不具体写了。假若想要精通更加多 axios 的安排和动用能力,请参见:

axios

7.1 Vue 群国内资本源
  • Thinking in Vue之一:组件扩展的尝尝

9 月和 10 月,做着修修补补的做事,休了个假,过了个十一。

列举叁个基本例子,虚构大家有一批的 CommonJS 的援引。它们是不可能在浏览器直接运营,所以须求把它们 捆绑 成 <script> 标识内的单一文件。Webpack 就会遵照 require() 调用的依赖关系为大家完结那点。

四、Babel 和 Postcss

8. jQuery

  • 前端分页插件

二〇一四 年 10 月 26 日专门的学业刚好满一年,决定不再续签

实在,Webpack 能做的更加多,通过 "loaders" 大家能让 Webpack 依据大家想要的别的措施打包输出。举例:

Babel

Babel 是一个 JavaScript 编译器。

应用 Babel 能够让大家大胆的利用 ECMAScript 的新一代规范,比如最盛行的 ES6 恐怕最新的 ES8 以及 ES9,而不用去牵挂一多元的包容性难点,交给 Babel 去管理就对了。

开荒 package.json,在 devDependencies 下能够找到 babel-core 和别的多少个babel package。同有时间在类型根目录下有三个称呼 .babelrc 的文书,这一个文件正是 Babel 的安插文件,张开以往方可阅览选拔了 stage-2 的专门的职业,可是接下去我们要安装 babel-preset-es二〇一四 Package 来支撑 ES6 的语法。

  1. 安装 babel-preset-es2015:cnpm install babel-preset-es2015 --save-dev
  2. 修改 .babelrc 文件:
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    ["es2015", "stage-2"]
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "es2015", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}
  1. 开始应用 ES6 的语法实行编制程序吧!

当然,还会有诸如 polyfill 等等的 Package 须求手动安装手艺支撑,推荐阅读官方文档:

Babel

9. 看书学习 | 成长 | 写作

  • 程序猿怎么样本领写出一篇好的博客也许才具小说?
  • 二零一五年,你读过的最佳的技艺书有哪几本?
  • 2016年书单
  • 缘何有人在读书初段功用惊人,而在过了入门阶段之后兴趣与读书工夫都赶快下滑?
  • 闻讯2017你想写前端?
  • 有的人平日看起来有个别努力,可最终总能得到别人努力后才有的战表,为啥?
  • 怎么购得好的钢笔
  • 有如何很有格调的钢笔?
  • 高级中学学生用哪些钢笔与学术好?
  • 如何钢笔相符学生或从不应用过钢笔的人?
  • 二零一五年底总计--前端生涯从0到1的长河
  • 那便是别人学习高效的案由

原来安插疯狂的娱乐半个月,然后再起来找职业。但从不工作时,才察觉根本无意玩耍,于是从头疯狂的投简历。

  1. 编译 ES2015、CoffeeScript 或 TypeScript 模块成 ES5 CommonJS 的模块;
  2. 编写翻译以前,能够通过 linter 校验源代码。
  3. 编译 Jade 模板成 HTML 并内联 JavaScript 字符串。
  4. 编写翻译 SASS 文件成 CSS,然后把转变的CSS插入到 <style> 标签内,然后再转译成 JavaScript 代码段。
  5. 拍卖在 HTML 或 CSS 文件中引用的图形文件,依照配置路线把它们活动到任性地点,根据 MD5 hash 命名。
  6. 假定您学会了Webpack,就能够通晓它有多么庞大,它丰硕明显地革新您前端开荒的功效。它根本的欠缺是安插方式有一点费劲,可是有了笔者那份使用指南,那使用 Webpack + Vue + vue-loader 的时候,基本上就扫清了非常多阻力了。

PostCSS

PostCSS 是多个通过 JS 插件编写翻译 CSS 的工具

PostCSS 能够看做是贰个平台,在那一个平台方面富含了许多非常管理 CSS 的插件,举例标准 CSS,使用新一代的 CSS Next 等等。其实 Vue-cli 项目里面内置了 PostCSS,同时设置了 autoprefixer,它会在 build 阶段自动生成给 CSS 成分加上前缀。想要明白越来越多的 PostCSS能够翻阅:

PostCSS

10. Git | Github | SVN | FTP

  • Git版本调控与工作流

阿里二面被淘汰,虽有个别忧伤,但对前景仍充满信心,毕竟前端之旅作者才起来一年。

Vue 组件规格

五、路由安顿

一贯给个法定文书档案的传送门:

vue-router

11. 创业 | 职场 | 管理 | 产品 | 运营

  • 何以对开采团队的人士开展业绩管理?
  • Medium、YouTube 和成品的那一点事儿
  • 职业两八年后,你悟出什么职场道理?
  • 设若不用前端这些职责了,你能做吗啊?
  • Ali9年,小编总计的前端架构演进3大阶段及团队管理心法

现阶段在一家做品质加快、监察和控制的厂家做多少可视化方面包车型客车前端开采,一时写写服务端。

*.vue 文件是客商用 HTML-like 的语法编写的 Vue 组件。每一个 *.vue 文件都席卷三部分 <template>, <script> 和 <style>:

六、结束语

前几天可能未有啥技能能够像前面三个那样五光十色,种种框架、工具、插件家常便饭,新手很轻巧在这样三个复杂的世界里面迷失。同一时候,比较多个人选择叁个框架,就很想要分出贰个轻重。其实,只假诺相符本人项指标框架正是值得尝试的。手艺不断变动,最关键的照旧里面包车型地铁基础知识,也许当您种种工具、框架玩的百般的狠心时,却忽略了个中的为主知识。所以,要始终记得本事是为人类服务的,同期基础知识始终要精晓牢靠。

12. IDE,编辑器,调节和测量试验等工具类

  • 学会用好 Visual Studio Code
  • Visual Studio Code有哪些你常用的插件?
  • 配置VSCode
  • 从Chrome源码看浏览器如何创设DOM树
  • 自家眼中的 Electron

幡然醒悟太多,随意挑几条吧

<template>
 <div class="example">{{ msg }}</div>
</template>
<script>
export default {
 data () {
 return {
 msg: 'Hello world!'
 }
 }
}
</script>
<style>
.example {
 color: red;
}
</style>

13. 前端架构及工程化构建筑工程具等,如:Gulp, Fis, Grunt

  • 微型io密集网址怎么着架构?
  • gulp源码分析(一)—— Stream详解
  • gulp源码剖判(二)—— vinyl-fs

本文由必威发布于必威-编程,转载请注明出处:每晚下班后学习两个小时,提交原则

相关阅读