一、创建VUE项目

npm install vue-cli -gvue init webpack myprjectcd myprojectnpm run dev

补充：

组件：它是可扩展的html,里面包括

<template></template>

<script></script>

<style></style>

vue框架的特性:能够实现热重载

二、vue项目目录结构

├── index.html                      入口页面    ├── build                           构建脚本目录    │   ├── build-server.js                 运行本地构建服务器，可以访问构建后的页面    │   ├── build.js                        生产环境构建脚本    │   ├── dev-client.js                   开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新    │   ├── dev-server.js                   运行本地开发服务器    │   ├── utils.js                        构建相关工具方法    │   ├── webpack.base.conf.js            wabpack基础配置    │   ├── webpack.dev.conf.js             wabpack开发环境配置    │   └── webpack.prod.conf.js            wabpack生产环境配置    ├── config                          项目配置    │   ├── dev.env.js                      开发环境变量    │   ├── index.js                        项目配置文件    │   ├── prod.env.js                     生产环境变量    │   └── test.env.js                     测试环境变量    ├── mock                            mock数据目录    │   └── hello.js    ├── package.json                    npm包配置文件，里面定义了项目的npm脚本，依赖包等信息    ├── src                             项目源码目录        │   ├── main.js                         入口js文件    │   ├── app.vue                         根组件    │   ├── components                      公共组件目录    │   │   └── title.vue    │   ├── assets                          资源目录，这里的资源会被wabpack构建    │   │   └── images    │   │       └── logo.png    │   ├── routes                          前端路由    │   │   └── index.js    │   ├── store                           应用级数据（state）    │   │   └── index.js    │   └── views                           页面目录    │       ├── hello.vue    │       └── notfound.vue    ├── static                          纯静态资源，不会被wabpack构建。    └── test                            测试文件目录（unit&e2e）        └── unit                            单元测试            ├── index.js                        入口脚本            ├── karma.conf.js                   karma配置文件            └── specs                           单测case目录                └── Hello.spec.js

出现下图页面就说明搭建成功

 

三、import 和 require 的区别

imporrt一定要放在文件顶部它相当于一个指针引用了文件，并没有把文件包含进来，需要调用文件时才引入。require:可以放在文件中的任何位置它是直接把文件包含进来　　

四、设置文件路由的流程

1）建立组件（.vue的文件）2）配置路由（index.js文件中配置）3）
     4)
     5)import 包名 from "组件路径"6)comonents进行注册　

五、vue的生命周期

1）定义vue对象并实例化2）created函数3）编译模板4）把HTML元素渲染到页面当中5）mounted函数6）如果有元素的更新，就执行updated函数7）销毁实例　

六、测试

仿抽屉新热榜做的一个测试　

代码如下：

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import ALL from '@/components/All'import NEWS from '@/components/NEWS'import DUANZI from '@/components/duanzi'import Detail from '@/components/Detail'Vue.use(Router)export default new Router({  routes: [    {      path: '/hw',      name: 'HelloWorld',      component: HelloWorld    },    {      path: '/',      name: 'ALL',      component: ALL    },    {      path: '/news',      name: 'NEWS',      component: NEWS    },    {      path: '/duanzi',      name: 'duanzi',      component: DUANZI    },    {      path: '/detail',      name: 'Detail',      component: Detail    },  ]})

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import axios from 'axios'import VueAxios from 'vue-axios'Vue.prototype.$axios = axios;//Vue.use(axios, VueAxios)//Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: '
      '})