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、需要   放在根组件里面

  

6、App.vue