168.Vue.js智能扫码点餐系统（二）【搭建Vue开发环境】2019.03.18

0、知识点

搭建开发环境

1、搭建Vue开发环境
在这里插入图片描述

在这里插入图片描述
2、安装vue-cli脚手架

安装命令

// 第一种：
npm install --global vue-cli

// 第二种
cnpm install --global vue-cli

在这里插入图片描述

3、创建基于webpack的项目

给项目命名为vue-project
vue init webpack vue-project
vue init webpack-simple vue-project // 简捷的安装方式
切入到vue-project目录

cd  vue-project

安装依赖

npm  install

在这里插入图片描述

运行项目

npm run dev

在这里插入图片描述

4、配置路由

配置网址：https://router.vuejs.org/zh/

在这里插入图片描述

安装路由：

 npm install vue-router

在这里插入图片描述

安装完vue-router后，需要重新启动项目

npm  run dev

5、main.js

import Vue from 'vue'
import App from './App.vue'

//引入路由  use路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1、创建引入组件

import Start from './components/Start.vue';
import Home from './components/Home.vue';
import Hot from './components/Hot.vue';
import Order from './components/Order.vue';
import Pcontent from './components/Pcontent.vue';
import Search from './components/Search.vue';
import Cart from './components/Cart.vue';


//2、配置路由

const routes = [
  { path: '/start', component: Start },
  { path: '/home', component: Home },
  { path: '/hot', component: Hot },
  { path: '/order', component: Order },
  { path: '/pcontent', component: Pcontent },
  { path: '/search', component: Search },
  { path: '/cart', component: Cart },
  { path: '*', redirect: '/start' }
]


//3、实例化VueRouter

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes  属性的简写
})



//4、挂载


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})


//5、需要 <router-view></router-view>  放在根组件里面

6、App.vue

<template>
  <div id="app">
   <router-link to="/start">开始</router-link>

   <router-link to="/home">点餐</router-link>

   <router-link to="/cart">购物车</router-link>

    <br />

    <router-view></router-view>



  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="scss">

</style>

168.Vue.js智能扫码点餐系统（二）【搭建Vue开发环境】2019.03.18

猜你喜欢