本文共 2184 字，大约阅读时间需要 7 分钟。

做项目的流程

1. 梳理好需求（持续做…更新）
2. 找一个合适的模板 -> 外卖超人 -> html+css样式
   注意：如果将所有的js文件删除 -> 显示效果不受影响（交互效果可能会受影响）
3. 将模板与vue整合 ->

创建项目

vue create food_superman

vue项目配置：创建文件vue.config.js

const path = require('path')const resolve = dir => path.join(__dirname, dir);const webpack = require("webpack");module.exports = {
       configureWebpack: {
           plugins: [          new webpack.ProvidePlugin({
               // 将一些对象注册成全局的            // $: 'jquery',            // jQuery: 'jquery',          })        ]    },	chainWebpack: config => {
           // 添加别名      config.resolve.alias            .set('@', resolve('src'))            .set('assets', resolve('src/assets'))            .set('components', resolve('src/components'))            .set('layout', resolve('src/layout'))            .set('base', resolve('src/base'))            .set('static', resolve('src/static'));	}}

安装依赖 => 做路由 vue-router

npm install vue-router --save

资源准备

• css、images => src/assets目录
• html => src/components/html目录

路由规划

/ => index.html => Index.vue

/login/ => login.html => Login.vue /member_index/ => member_index.html => MemberIndex.vue

创建三个空组件

创建路由： src/router/index.js

注意事项 => 不要打错单词

import Vue from "vue";import Router from "vue-router";Vue.use(Router);export default new Router({
     routes: [    {
         path: "/",      name: "index",      component: () => import("components/Index.vue")    },    {
         path: "/login/",      name: "login",      component: () => import("components/Login.vue")    },    {
         path: "/memberindex/",      name: "memberindex",      component:  () => import("components/MemberIndex.vue")    }  ]});

将路由加载到项目上: src/main.js => 入口文件

import Vue from "vue";import App from "./App.vue";import router from "./router"// import router from "./router/index.js"Vue.config.productionTip = false;new Vue({
     render: h => h(App),  router}).$mount("#app");

问题 => 为什么vue加载了router，但是访问还是没有看到路由对应的组件呢？

使用路由：

=> 当访问的是某页面，加载对应的组件到router-view位置

由于在这里，每个页面都是一个单独的页面，所以不需要

使用路由： src/App.vue

   全局加载样式 main.js// 加载模板需要的css文件import "@/assets/css/common.css";编写Index组件

转载地址：http://xhezi.baihongyu.com/