VueJS

前端三大框架之一的 VueJS

logo

我的观点

我得找工作啊,那我把学习的精力放在哪个前端框架好呢?在对几种框架浅尝辄止后,VueJS 似乎更配我的需求:入门难度相对较低,全家桶较丰富

双向绑定

VueJS 有特别简洁的双向绑定句法,所以这儿特意要提出来

1
2
3
4
5
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
}
1
2
3
4
5
6
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})

两个重要的库

VueJS 的生态系统中的 'vue-router''vuex' 这两个插件仅是可选的,但实际上用 vuejs 做的项目基本都会带上

  • 'vue-router': 对单页应用的路由进行管理,让路由更友好
  • 'vuex': 类似 Redux,管理状态,我理解成是统一地管理数据的变化

手把手入门

我自己学习 VueJS 时有点糊糊涂涂的,感到

  • VueJS 官网教程知识多,有的知识点不容易学习,这样的情况下还不够,实际做还有非常多别的知识
  • 实际的运用,与官网上的小示例的方式是不太一样的(普遍用到 webpack 和 .vue 文件)
  • 要了解的知识太多,希望以最少的知识量来做成入门级又符合真实环境的小应用

让咱们以 vue-2.0-simple-routing-example 为例子学习。咱要把这个例子再写一遍,但是以 vue-cli 为脚手架,相应的的 webpack 模板为基础

git clone

vue-2.0-simple-routing-example 给 clone 下来

本地运行

进入 vue-2.0-simple-routing-example 目录,npm i 之后 npm run dev 运行看看效果 vue-2.0-simple-routing-example

重制第一步

咱要把 vue-2.0-simple-routing-example 重写一遍,代码重复的部分可以直接复制粘贴而不用手打

  • 通过 npm i vue-cli -g 安装好 vue-cli,这样你在命令行下可以用 vue 这个命令了
  • vue init webpack yourpath,以 webpack 模板初始化你的应用(这里会新建 yourpath 这个文件夹),其间会让你键入一些设定。最初我是晕头转向的,之后明白这些设定(用什么做测试,是否检查代码风格等等)在现代的应用开发中是标配的,我底子薄得迎头赶上
  • 进到 yourpath,npm inpm run dev 看看效果 modify-simple-routing-example1

模仿

把 vue-2.0-simple-routing-example 的文件正确复制到咱的应用中,我做了以下几步

  • 先复制 .vue 文件,直接把 vue-2.0-simple-routing-example 的 src/components 和 src/layouts 和 src/pages 下的 .vue 文件复制到 yourpath/src/components/ 目录下,此时这些 .vue 文件在同一个目录下,和原来的不同,所以把路径改改好

404.vue

1
import MainLayout from '../layouts/Main.vue'

改为

1
import MainLayout from './Main.vue'

About.vue

1
import MainLayout from '../layouts/Main.vue'

改为

1
import MainLayout from './Main.vue'

Home.vue

1
import MainLayout from '../layouts/Main.vue'

改为

1
import MainLayout from './Main.vue'

Main.vue

1
import VLink from '../components/VLink.vue'

改为

1
import VLink from './VLink.vue'

  • 把 src/main.js 和 src/routes.js 复制到 yourpath/src 目录,其中 main.js 替换了 yourpath/src 存在的 main.js 文件
  • 似乎可以了,但运行却出错
    1
    2
    3
    4
    5
    6
    7
    8
    ERROR in ./src/main.js
    Module not found: Error: Can't resolve './pages' in '/yourpath/src'
    @ ./src/main.js 12:28-71
    @ multi ./build/dev-client ./src/main.js
    ERROR in ./src/main.js
    Module not found: Error: Can't resolve './pages/404.vue' in '/yourpath/src'
    @ ./src/main.js 12:74-100
    @ multi ./build/dev-client ./src/main.js

熟悉的路径问题,把

1
2
3
return matchingView
? require('./pages/' + matchingView + '.vue')
: require('./pages/404.vue')

改为

1
2
3
return matchingView
? require('./components/' + matchingView + '.vue')
: require('./components/404.vue')

  • 这下再运行,成了

效果

和 vue-2.0-simple-routing-example 一模一样,重制是成功滴 modify-simple-routing-example2

Edit on GitHub