用vue创建一个项目

做项目的流程

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

创建三个空组件

index

创建路由： 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

<template>
  <div>
    <!-- 组件内容展示的位置 -->
    <router-view></router-view>
    这里写公共部分。比如版本信息，Header
    ©2014 waimaichaoren.com All Rights Reserved - 沪ICP备11019908号 
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
</style>


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



编写Index组件
<style>
  /* 导入当前页面需要的css文件 */
  @import url("../assets/css/frontPage.css");
</style>