前言

–
师姐说：我们这次项目前端用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 ***

使用

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

【项目目录】

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

vue-router

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

放上一个小栗子：

在app.vue中

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文件中

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）
未完待续

vue.js学习实例

前言

vue基础语法

vue-cli 脚手架

安装

使用

vue-router

FEATURED TAGS