Vue项目篇-01

1、首先下载项目

• npm install -g vue-cli-------全局安装vue-cli
• vue init webpack project-name-------webpack初始化项目
• cd project-name---------进入项目
• npm install------------webpack安装需要的包
• npm run dev-------------自动创建服务器并运行项目

2、代码的编写

• import/export----------ES6导入与导出

• 创建hello.vue组件

每一个页面都是一个组件，都是一个vue文件，由template、JavaScript、style构成

template：

注意：template标签内需要一个根标签，template最后会消失

JavaScript：

注意：用export default{}-------模块默认导出

style：

编写有关当前页面样式

3、路由 vue-router

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。

vue-router链接

• 安装-------------npm install vue-router

• 引入-------------import VueRouter from “vue-router”

• 调用-------------Vue.use(VueRouter)

• 使用

  • 
    最后会被渲染成a标签，通过to属性进行锚点的设置
  • 编写路由代码

html

  
Hello App!
  

    
    
    
    Go to Foo
    Go to Bar
  
  
  
  

JS代码

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
const Foo = { template: '
foo
' }
const Bar = { template: '
bar
' }
// 可以从其他文件 import 进来
import Home from ‘./pages/home’
import Mine from ‘./pages/mine’

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '/home', component: Home},
  { path: '/mine', component: Mine}
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

//当然也可以这样写
const app = new Vue({
    el:'#app',
    template:'',
    components:{App},
    router
})
// 现在，应用已经启动了！

要注意：当对应的路由匹配成功，将自动设置class属性值.router-link-active。查看API文档

下面展示一下大牛写的完整的代码吧！

    
    
    


    
    
    

      
Hello App!
      

        
        
        
        Go to Foo
        Go to Bar
      
      
      
      
    
    
    

4、设置二级路由

• 子页面中正常编写router-link和router-view

    
  
        ONE
        TWO
    
    
  

• 配置二级路由

    const routers = [
        {path:'/mine',component:Mine,children:[
            {path:'one',component:One},
            {path:'two',component:Two}
        ]}
    ]
  

5、处理网络请求

• 安装插件----------npm install vue-resource

• 引入并使用
  import VueResource from 'vue-resource';
  Vue.use(VueResource);

• 代码

    mounted(){
        this.$http.get('http//www.vrserver.applinzi.com/aixianfeng/apihomehot.php').then(function(res){
            console.log(res);
        })
    }
  

这就是做一个完整项目所用到的全部了，之后有时间我会做一个小项目做一个展示