Vue 实战饿了么（一）

深藏阁楼爱情的钟 2021-09-19 04:16 525阅读 0赞

#### 一、$mount()手动挂载 ####

##### 当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。 #####

#####     #####

new Vue({
       router,
       render: h => h(App)
     }).$mount("#app");
    `
    `new Vue({
      el: '#app',
      router,
      render: h => h(App) 
    });

##### 解释： render: x => x(App) #####

这里的render: x =>x(App)是es6的写法
         转换过来就是：暂且可理解为是渲染App组件
         render:(function(x){
              return x(App);
          });

#### 二、mock数据 ####

##### 如果后端接口尚未开发完成，前端开发一般使用mock数据。 #####

##### 注意：新版的vue-cli 自动搭建的build 文件里没有dev-server.js 和 dev-client.js ，因此我们要在webpack.dev.conf.js 里配置 #####

##### 配置如下： #####

##### （1）复制data.json 到该项目下 #####

##### （2）找到bulid目录下 webpack.dev.conf.js 找到 const portfinder = require('portfinder')，在其下添加mock 数据 #####

// 添加mock 数据
    const express = require('express')
    const app = express()
    var appData = require('../data.json')//加载本地数据文件
    var seller=appData.seller;
    var goods=appData.goods;
    var ratings=appData.ratings;
    var apiRoutes = express.Router()
    app.use('/api', apiRoutes)

##### （3）接着找到 devServer 里的 watchOptions，其后紧跟 #####

watchOptions: {
          poll: config.dev.poll,
        },
        before(app) {
          app.get('/api/seller', (req, res) => {
            res.json({
              errno: 0,
              data: seller
            })//接口返回json数据，上面配置的数据appData就赋值给data请求后调用
          }),
          app.get('/api/goods', (req, res) => {
            res.json({
              errno: 0,
              data: goods
            })
          }),
          app.get('/api/ratings', (req, res) => {
            res.json({
              errno: 0,
              data: ratings
            })
          })
        }

##### （4）设置保存后 npm run dev 运行 访问[http://localhost:8080/api/seller][http_localhost_8080_api_seller] 就可接收到 该路由对应的json 数据 #####

#### 三、关于路由 vue-router ####

#### \* 直接定义路由 ####

##### （1）首先定义路由 #####

//  定义路由组件
    	const goods = { template: '<p>我是对应的goods下面的内容</p>' };
    	const seller = { template: '<p>我是对应的seller下面的内容</p>' };

##### （2）创建路由实例 #####

// 创建路由实例
    	var router = new VueRouter({
              routes:[
                //  路由重定向即设置默认路由  
                {path:'/',redirect:'/goods',component:goods}, 
                {path:'/goods',component:goods},
                {path:'/seller',component:seller}
              ]
          });

##### 路由实例方法: #####

router.push({path:'goods'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
    router.replace({path:'goods'}) //替换路由，不会往历史记录里面添加
    // router.go('goods')

##### （3）创建vue 实例 #####

//  创建 vue 实例
    	const app=new Vue({
    		el:"#app",  //  挂载元素
    		router
    	})

##### （4）DOM 渲染    #####

<body>
     <div id="app">
      <div class="nav">
       <router-link to='/goods'>good</router-link>
       <router-link to='/seller'>seller</router-link>
      </div>
      <div class="content">
       <router-view></router-view>
      </div>
     </div>
    </body>

##### 注意： #####

查看效果时，发现动态的给当前路由 添加le一个router-link-active的类名,所以如果需要设置当前路由样式（比如：高亮）就可以直接在style里设置了

#### \* （main.js）引入路由组件 ####

##### （1）引入路由文件 #####

import goods from './components/goods/goods'
    import ratings from './components/ratings/ratings'
    import seller from './components/seller/seller'

##### （2）创建路由实例 定义路由组件 #####

const router = new VueRouter({
      routes: [{
        path: '/',
        component: goods
      },{
        path: '/goods',
        component: goods
      }, {
        path: '/ratings',
        component: ratings
      }, {
        path: '/seller',
        component: seller
      }]，
      linkActiveClass: 'active' //  将 router-link-active  改为 active（方便样式操作）
    })

##### （3）创建vue实例并挂载 #####

new Vue({
      el:"#app",
      router,
      template: '<App/>',
      components: {
        App
      }
    })

#### 四、axios 请求数据 ####

##### （1）安装 axios    #####

npm install axios

##### （2）引入axios组件 #####

import axios from 'axios'

##### （3）axios 请求数据（在此之前创建一个接受数据的对sellerobj） #####

export default {
     //  获取数据 准备  返回一个对象，后台获取数据后 赋予 该对象
       data (){
       	 return {
       	 	 sellerobj:{}
       	 }
       },
       created (){ //  创建之前 请求数据
       	 axios.get('static/data.json').then((result) => {
       	  	 console.log(result) //  控制台检查  数据存储在  result.data 里  
       	  	this.sellerobj = result.data.seller //  将数据存到sellerobj里  	 	
       	  })
       }
    }

原文发布时间为：2018年01月19日  
原文作者：[前端喵][Link 1]

本文来源：[开源中国 ][Link 2]如需转载请联系原作者

[http_localhost_8080_api_seller]: http://localhost:8080/api/seller
[Link 1]: https://my.oschina.net/u/3662721
[Link 2]: https://my.oschina.net/u/3662721/blog/1609753