Vue项目篇-01

作者: Victor细节 | 来源:发表于2017-01-29 12:17 被阅读0次

Vue项目篇-01
Vue项目重点
vue入门：使用vue独立版本构建vue项目
Vue 新手开发项目以及基于 Vue cli 项目最佳实践（
01、music
vue-cli生成的webpack配置解析-build/dev-
Vue + ElementUI 后台管理系统项目心得（二）
Vue 2.0的项目扩展
Vue项目实战01
Vue实战（二）框架和环境

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：<code><template></template></code>

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

JavaScript：<code><script></script></code>

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

style：<code><style></style></code>

编写有关当前页面样式

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)
使用
- <code> <router-link to='/home'></router-link> </code>
  最后会被渲染成a标签，通过to属性进行锚点的设置
- <code><router-view></router-view></code>
- 编写路由代码

html

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

JS代码

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

// 1. 定义（路由）组件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 可以从其他文件 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:'<App/>',
    components:{App},
    router
})
// 现在，应用已经启动了！

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .router-link-active {
          color: red;
        }
    </style>
</head>
<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <!-- use router-link component for navigation. -->
        <!-- specify the link by passing the `to` prop. -->
        <!-- <router-link> will be rendered as an `<a>` tag by default -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </p>
      <!-- route outlet -->
      <!-- component matched by the route will render here -->
      <router-view></router-view>
    </div>
    
    <script type="text/javascript">
        // 0. If using a module system, call Vue.use(VueRouter)

        // 1. Define route components.
        // These can be imported from other files
        const Foo = { template: '<div>foo</div>' }
        const Bar = { template: '<div>bar</div>' }

        // 2. Define some routes
        // Each route should map to a component. The "component" can
        // either be an actual component constructor created via
        // Vue.extend(), or just a component options object.
        // We'll talk about nested routes later.
        const routes = [
          { path: '/foo', component: Foo },
          { path: '/bar', component: Bar }
        ]
        // 3. Create the router instance and pass the `routes` option
        // You can pass in additional options here, but let's
        // keep it simple for now.
        const router = new VueRouter({
          routes
        })
        // 4. Create and mount the root instance.
        // Make sure to inject the router with the router option to make the
        // whole app router-aware.
        const app = new Vue({
          router
        }).$mount('#app')
        // Now the app has started!
    </script>
</body>
</html>

4、设置二级路由

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

  <div class="menu">
      <router-link to="mine/one">ONE</router-link>
      <router-link to="mine/two">TWO</router-link>
  </div>
  <router-view></router-view>

配置二级路由

  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);
      })
  }