Permalink
Browse files

添加文章列表

  • Loading branch information...
1 parent 004f386 commit f34104bc0825739ebc247d8f36e0a34af7c4790a @leenty committed Dec 11, 2016
Showing with 63 additions and 216 deletions.
  1. +1 −0 .gitignore
  2. +11 −2 build/new-article.js
  3. +1 −1 src/articlesRoutes.js
  4. +5 −5 src/components/article.vue
  5. +17 −5 src/components/templates/AppArticleList.vue
  6. +0 −202 src/md/articles/test.md
  7. +28 −1 src/routes.js
View
@@ -7,3 +7,4 @@ test/e2e/reports
selenium-debug.log
.deploy
.deploy_coding
+src/md/articles/
View
@@ -55,7 +55,11 @@ const createRoute = function (infoArr) {
let routesStr = 'const articlesRouter = ['
infoArr.forEach((v, k) => {
let articleName = v.fileName.replace(' ', '_')
- routesStr += `${k ? ',' : ''}{name: '${articleName}',path: '/${v.date}/${articleName}',component: require('./md/articles/${v.fileName}.md')}`
+ routesStr += `${k ? ',' : ''}{`
+ + `name: '${articleName}',`
+ + `path: '/${v.date}/${articleName}',`
+ + `component: require('./md/articles/${v.fileName}.md')`
+ + `}`
})
routesStr += ']\nexport default articlesRouter\n'
fs.writeFile(path.join(__dirname, `../src/articlesRoutes.js`), routesStr, err => {
@@ -68,7 +72,12 @@ const createRoute = function (infoArr) {
const setInfo = function (name) {
const date = new Date().format("yyyy/MM/dd")
- return `<!--{\n"title": "${name}",\n"date": "${date}",\n"tag": ""\n}-->\n`
+ return '<!--{'
+ + `\n"title": "${name}",`
+ + `\n"date": "${date}",`
+ + `\n"tag": "",`
+ + `\n"series": ""`
+ + '\n}-->\n'
}
const createArticle = function (name) {
@@ -1,2 +1,2 @@
-const articlesRouter = [{name: 'qwe',path: '/2016/12/11/qwe',component: require('./md/articles/qwe.md')},{name: 'test',path: '/2016/12/11/test',component: require('./md/articles/test.md')}]
+const articlesRouter = [{name: 'vue2-1',path: '/2016/10/21/vue2-1',component: require('./md/articles/vue2-1.md')},{name: 'vue2-2',path: '/2016/11/20/vue2-2',component: require('./md/articles/vue2-2.md')},{name: 'vue2-3',path: '/2016/11/27/vue2-3',component: require('./md/articles/vue2-3.md')},{name: 'vue2-4',path: '/2016/12/04/vue2-4',component: require('./md/articles/vue2-4.md')},{name: 'vue2-5',path: '/2016/12/11/vue2-5',component: require('./md/articles/vue2-5.md')}]
export default articlesRouter
@@ -2,20 +2,20 @@
.article
h1.l-ta--c 文章test
.md-content
- test
+ router-view
</template>
<script>
// import md from 'marked'
- import test from '../md/articles/test.md'
+ // import test from '../md/articles/test.md'
export default {
data () {
return {
}
- },
- components: {
- test
}
+ // components: {
+ // test
+ // }
}
</script>
@@ -8,7 +8,7 @@
).articleList__li
//- 在router-link里不能触发click事件
router-link(
- :to="{path: item.url}",
+ :to="{name: item.name}",
active-class="articleList__link--Active",
exact
).articleList__link.u-borderBox.u-link__inherit
@@ -24,12 +24,24 @@ export default {
return {
list: [
{
- url: '/',
- name: 'home'
+ name: 'vue2_1',
+ title: 'home'
},
{
- url: '/article',
- name: 'article'
+ name: 'vue2_2',
+ title: 'article'
+ },
+ {
+ name: 'vue2_3',
+ title: 'article'
+ },
+ {
+ name: 'vue2_4',
+ title: 'article'
+ },
+ {
+ name: 'vue2_5',
+ title: 'article'
}
]
}
@@ -1,202 +0,0 @@
-<!--{
-"title": "test",
-"date": "2016/12/11",
-"path": "qwe",
-"tag": ""
-}-->
-
-承接上文[vue2.0一起在懵逼的海洋里越陷越深(一)](http://www.leenty.com/2016/10/21/vue2-1/)
-### 说好了一起懵逼,那么我们继续下沉
-在上一篇里已经将vue2.0需要的依赖都装齐了
-那么接下来
-![qwee](http://upload-images.jianshu.io/upload_images/2005796-3fc063c8fb0b1fba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-因为vue最后生成的页面看似静态页面(对于静态页面这里有些偷鸡用法,不管你怎样,反正我已经露出了诡异的微笑😏,再贴一个[vue2.0 demo的项目地址](https://github.com/leenty/vue2),大爷有兴趣可进去看看演示,开心了就加个星),其实却是个SPA(单页面应用)
-没错!就是一个SPA
-
-### 作为一个SPA,当然有不同的地方
-SPA与传统网页区别的地方是SPA具有前端路由来模拟页面跳转,当然这是众多不同之一,这篇只说前端路由。
-上一篇中有安装vue-router组件,这个就是vue的前端路由
-vue + vue-router简直是爽,页面跳转的速度简直是不要不要的
-不光是用户体验上的提升,作为一名开发者,在使用了如vue,react等这类MVVM框架后,就不会再想回到jQuery的时代了。
-
-### 前面搞了半天,现在要开始coding啦!
-好的,用自己的小编辑器打开vue项目(我用的是sublime)
-可以看到项目目录是这样子的
-![files-tree](http://upload-images.jianshu.io/upload_images/2005796-e8d30c83712c89f2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-(插一句,如果喜欢这个sublime主题可以[查看这篇文章](http://www.leenty.com/2016/10/06/sublime-material-theme/))
-与自己的目录对比发现少几个文件,那是没有什么关系的,接下来要做的就是去创建这些文件。
-
-### 作为一个SPA,首先要有路由
-从目录图片里可以看到`main.js`这个文件,没错这个就是程序的入口
-这个文件的内容是这样的
-```js
-import Vue from 'vue'
-import router from './router'
-
-import App from './App'
-
-/* eslint-disable no-new */
-new Vue({
- router,
- render: h => h(App)
-}).$mount('#app')
-```
-[`main.js`地址](https://github.com/leenty/vue2/blob/master/src/main.js)
-这里用的是ES6的语法,使用`import`来导入包
-这里导入了vue包,还有两个文件,分别是`router.js``App.vue`
-`.js`后缀是可以省略的(毕竟是亲生的,你不说导入什么类型的文件,肯定是自家人毕竟亲呀)
-其实`.vue`后缀也是可以省略的,我建议还是写一下,如果遇到两个同名文件就尴尬了。
-
-好的,这个`router.js`就是路由的输出口啦,
-`App.vue`就是目录里已经存在的那个模板文件啦,你的界面就从这里开始啦。
-引入了包就可以开始设置路由和挂载模板了
-
-顺带一提,可以看到在`new Vue()`时传入了一个对象,但是这个对象却不是键值对,
-是这样,这是ES6的一种语法,当引用的变量名和键名相同时,就可以简写成这样
-如果还原来是这样的
-```js
-new Vue({
- router: router,
- render: h => h(App)
-}).$mount('app')
-// 被简写成了
-new Vue({
- router, // 这是ES6对象的简写,扩展开就是router: router
- // 箭头函数(=>)是ES6的新语法
- render: h => h(App) // 这里扩展开就是render: (h) => { return h(App) }
-}).$mount('app')
-```
-PS:ES6的新语法现在网上文章已经有很多了,我之后也会发一版常用的语法
-
-### 那么现在在src目录下创建`router.js`文件
-内容是这样的:
-```js
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import routes from './routes'
-
-// 告诉vue要使用router
-Vue.use(VueRouter)
-
-/* eslint-disable no-new */
-// 实例化router对象
-const router = new VueRouter({
- mode: 'hash', // 设置路由模式 可选值: "hash" | "history" | "abstract",默认"hash"
- linkActiveClass: 'u-link--Active', // 这只链接激活时的class
- // base: '/app/', // 这个是设置根目录路径,一般用不到,默认'/'
- routes // 挂载路由集合 后面会说
-})
-// 导出router对象
-export default router
-```
-[这是`router.js`地址](https://github.com/leenty/vue2/blob/master/src/router.js)
-这里引入了两个包`vue`,`vue-router`和一个包含路由集合的`routes.js`文件
-整个文件的逻辑就是,使用`Vue.use()`方法告诉vue我们使用了路由
-然后就大大方方的导出路由对象
-![main.js router](http://upload-images.jianshu.io/upload_images/2005796-ebc26fa935c8cf9a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-这个时候`main.js`里就可以接受到这里导出的路由对象,并挂载到vue对象上
-
-### 在src目录下创建`routes.js`文件
-`routes.js`是用来放置路由集合的文件
-其实路由集合是可以写在`router.js`里的,这里为什么不写在一起呢?
-因为当路由集合变得庞大时,如果还是写在`router.js`里,就会显得拥挤,不便于阅读
-所以这里推荐单独写出来。
-同时呢也可以创建路由所对应的模板文件(`.vue`文件,我把它称为模板文件),`Article.vue``Home.vue`
-模板文件叫什么名由自己决定,于是就能看到这张图里所有文件都齐了
-![files-tree](http://upload-images.jianshu.io/upload_images/2005796-e8d30c83712c89f2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-
-那么在编写`routes.js`文件之前,需要先写好两个模板的内容(不然一会有没有成功都不清楚了,23333)
-
-好的,贴一下`home.vue`的内容
-```html
-<template lang="pug">
-.home
- h1.l-ta--c Material Desgin
-</template>
-
-<script>
- export default {
- data () {
- return {
- }
- }
- }
-</script>
-
-<style lang="stylus">
-</style>
-```
-vue模板是html结构的,这也是对界面编写最友好的方式
-里面的`<template> </template>`标签就是视图
-`<script></script>`就是js,这个没有争议
-`<style></style>`是写css的,这个也没有问题
-但是当仔细看我的代码,发现里面html使用了pug,css使用了stylus
-其实不用他们也是可行的,只是用pug和stylus写结构比较清晰
-不用也可以的
-如果要使用,请打开你的终端,给项目添加几个包
-```shell
-npm i pug stylus stylus-loader -D
-```
-里面的css的class(`.l-ta--c`)看着有点懵逼的,可以看看[使用BEM+emmet的css书写与命名技巧](http://www.leenty.com/2016/11/06/css书写与命名技巧/#main)
-好的,模板不需要太复杂,只要有字能显示就好了,至于`Article.vue`也是一样的,这里就不贴了
-
-Tips:模板里推荐有一个根元素,就像这里的`.home`就是根元素,这样不容易混乱,结构会清晰
-
-### 写好了模板就可以开始编写`routes.js`
-先贴代码!
-```js
-// 导入之前写好的两个模板
-import Home from './components/Home.vue'
-import Article from './components/Article.vue'
-
-// 编写路由集合
-const routes = [
- {
- name: 'Home', // 路由名,这个字段是可选的
- path: '/', // 路由路径,这里是根路径所以是'/'
- component: Home // 模板
- }, // 这些是常用的
- {
- name: 'Article',
- path: '/article',
- component: Article
- }
-]
-// 导出路由集合
-export default routes
-```
-[然后是文件地址](https://github.com/leenty/vue2/blob/master/src/routes.js)
-最后导出了路由集合(`routes`)后就可以在`router.js`里使用了
-于是,前面的`router.js`里的`routes`就有了。
-
-### 现在进行最后一步,到`App.vue`里添加路由
-代码如下:
-```html
-<template lang="pug">
- .app
- header
- //- 制作一个跳转链接
- //- 这里不要直接用a链接跳转,那样会导致页面重载,
- //- 相比之下用router-link是高效的方案
- //- to属性就是链接的地址啦
- router-link(to="/") home
- router-link(to="/article") article
- bodyer
- //- 路由地址所对应的模板将会被挂载到router-view标签上
- router-view
-</template>
-
-<script>
- export default {
- data () {
- return {
- }
- }
- }
-</script>
-
-<style lang="stylus">
-</style>
-```
-[地址](https://github.com/leenty/vue2/blob/master/src/App.vue)
-好了,到此为止就完成了路由搭建与使用了。
View
@@ -12,7 +12,34 @@ const routes = [
{
name: 'Article',
path: '/article',
- component: require('./components/Article.vue')
+ component: require('./components/Article.vue'),
+ children: [
+ {
+ name: 'vue2_1',
+ path: 'vue2_1',
+ component: require('./md/articles/vue2-1.md')
+ },
+ {
+ name: 'vue2_2',
+ path: 'vue2_2',
+ component: require('./md/articles/vue2-2.md')
+ },
+ {
+ name: 'vue2_3',
+ path: 'vue2_3',
+ component: require('./md/articles/vue2-3.md')
+ },
+ {
+ name: 'vue2_4',
+ path: 'vue2_4',
+ component: require('./md/articles/vue2-4.md')
+ },
+ {
+ name: 'vue2_5',
+ path: 'vue2_5',
+ component: require('./md/articles/vue2-5.md')
+ }
+ ]
},
{
name: 'Demo',

0 comments on commit f34104b

Please sign in to comment.