vue.js学习实例

前言


师姐说:我们这次项目前端用vue.js吧
我说:好呀

  然后就进入了vue.js的学习中,这几年的大势前端框架Angular.js和react.js之前都略微涉及了一下,但是缺乏小项目的实战,属于看了就忘,这次通过使用vue来完成一个小项目,加深了对其熟悉,所以说,动手做点东西虽然慢了,但是学习的快了。
  这次是用百度前端学院中的一个“微型问卷调查平台”来进行练手,当时学习vue的时候,vue2.0版本还未上线,没想到过几天就上线了,所以这个项目是基于1.0了,vue2.0还是做了挺多改动的,遗弃了原来的一些方法,比如ready,dispatch等。
  接下来讲的东西还是基于2.0了,觉得再讲1.0的可能没有多大意义。
  在这次小项目中,首次尝试了webpack,sass,localstorage等东西,所以学习到的东西还是挺多的,今天主要和大家讲一下vue-cli脚手架和router的配置吧
话不多说,进入正题。

vue基础语法

  vue中文文档【http://cn.vuejs.org/guide/】
  直接去看文档吧,已经写的比较清晰了.

vue-cli 脚手架

   Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

安装

1
npm install -g vue-cli   //全局安装vue-cli

建议大家安装淘宝的npm镜像,否则每次通过npm安装东西速度太慢

1
npm install -g cnpm --registry=https://registry.npm.taobao.org //安装淘宝镜像

以后安装插件即可用下面的方式,比npm install xx 要快

1
cnpm install ***

使用

1
2
3
4
vue init webpack my-project //my-project是项目名字
cd my-project //到项目根目录下
npm install //如果安装淘宝镜像,用cnpm install速度快很多
npm run dev //运行后就会看到一个“hello vue”的页面

【项目目录】
1.png

通过vue-cli 可以快速的搭建一个整体框架。

vue-router

  想要完成一个大型的单页面,少不了路由的配置

放上一个小栗子:

在app.vue中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
template>
<div id="search-page" >
<nav-bar></nav-bar>
<router-view></router-view> <!-- 路由匹配到的组件将渲染在这里 -->
</div>
</template>

<script>
import NavBar from '../../components/NavBar'
export default {
name: 'search-page',
components: {
'nav-bar': NavBar
},
data () {
return {
}
}
}
</script>

router的配置主要在main.js文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import VueRouter from "vue-router" //引入vue-router文件,需要事先用npm安装
//1、引入相关(路由)组件
import Form from '../../components/Form'
import Box from '../../components/Box'
import Result from '../../components/Result'
import Info from '../../components/details/info'
import Website from '../../components/details/website'
import comment from '../../components/details/comment'
Vue.use(VueRouter);
Vue.config.debug=true;
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
const routes=[
{path:"/",component:Box},
{path:"/result/:keyword",name:"result",component:Result},
{path:"/person/:id",name:"person",component:Person,/*嵌套路由*/
children:[
{
path:"/",component:Info
},
{
path:"comment",component:comment
},
{
path:"website",component:Website
}
]
}
]
//3、创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})

// 4. 创建和挂载根实例
const app=new Vue({
router:router,
render:h=>h(App),
}).$mount("#search-page");

最后附上微型问卷调查系统的完成的效果:https://wsyks.github.io/learn-vue/#!/ (基于1.0)
未完待续


感谢你的阅读,本文出自我是_一棵树_,转载时请注明出处,谢谢

文章地址:syean.cn/2016/11/14/vue-js学习实例/