小米商城实战vue项目预热 01

选择vscode编译器：

第一步：

在github上面创建项目，拉到本地，进行项目初始化；
不懂，可以看看我的文章创建vue项目基本流程；

第二步：
安装依赖
鉴于方便，我们使用什么包就通过npm安装就行；
对于网站的快速建站，与配合，element-ui组件库是一个很棒的选择；
通过
npm 安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
git上面运行，类型同样：

npm i element-ui -S

安装成功，打开vs code ,
查看项目的package.json:

显示成功安装组件库；
当然，在main.js需要引入element-ui。
作为一个项目的入口，我们需要

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

这些组件库上面有更详细的讲解；

接着我们创建src/views文件夹，里面存取的是vue文件，是父组件；
作用是与src/components中的子组件配合使用；当然，没有这个components文件夹，你也得新建。
看你自己喜欢，也可以创建一个pages文件夹，包含这两个文件夹；

下一步：
编写项目的根组件 App.vue
布好局：

<!--
 * @Description: 项目根组件
 * @Author: 
 * @Date: 2020-04-07 
 * @LastEditors: 
 * @LastEditTime: 
 -->

<template>
  <div id="app" name="app">
    <el-container>
      <!--顶部的导航栏-->
      <div class="topbar">
        <div class="nav">
           <!--子导航栏-->
          <ul>
            <li></li>  <!--登录注册按钮-->
            <li></li>  <!--确认登录 or 退出按钮-->
            <li></li>  <!--我的订单-->
            <li></li>  <!--我的收藏-->
            <li></li>  <!--购物车-->
          </ul>
        </div>
      </div>
      <!-- 顶部导航栏END -->

    <!-- 顶栏容器 -->
    <el-hearder>
      <el-meun>
        <div class="logo"></div> <!--logo-->
        <el-meun-item></el-meun-item> <!--菜单的子菜单：首页-->
        <el-meun-item></el-meun-item> <!--菜单的子菜单：全部商品-->
        <el-meun-item></el-meun-item> <!--菜单的子菜单：关于我们-->
        <div class="so"></div> <!--搜索框-->
      </el-meun>
    </el-hearder>
    <!-- 顶栏容器END -->

    <!-- 登录模块 -->
      <MyLogin></MyLogin>
    <!-- 注册模块 -->
      <MyRegister></MyRegister>

      <!-- 主要区域容器:展示商品区域 -->
      <el-main>
        <keep-alive>
          <!-- 显示的是当前路由地址所对应的内容 -->
          <router-view></router-view>  
        </keep-alive>
      </el-main>
      <!-- 主要区域容器END -->      
 
    <!-- 底栏容器 -->
    <el-footer>
      <div class="footer">
        
      </div>
    </el-footer>

    </el-container>
    
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

框架大概这样吧，后面再跟进吧。。

我这里参考的是hai-27;

他的github:https://github.com/hai-27/vue-store;