使用Vue CLI创建项目

1.创建命令

vue create edu-boss-fed

2.自定义选项
我们需要这几种功能：

• Babel
• Router（使用hash模式下的路由）
• Vuex
• CSS Pre-processors（CSS预处理器，使用Sass/SCSS）
• Linter（standard）
• 需要选择，Lint on save，Lint and fix on commit
• 不要将Babel和ESLint等一众工具统合在package.json中，单独放在一个文件内方便管理

3.创建完毕之后，进入到项目目录，使用

npm run serve

启动项目，成功

加入Git 版本管理

github自行选择

1.创建github仓库的一些选项：

• Repository name：仓库名
• Description：仓库描述信息
• Public：公开
• Private：私人
  由于使用vueCLI创建的项目，有README.flie，.gitignore git版本管理等等内容，不需要勾选下面三个配置
  2.获取到项目的http链接，使用

git remote add origin 远程项目地址

添加远程项目地址

git remote -v仓库路径查询

3.推送到远程仓库

git push -u origin master

4.刷新github仓库，就有了内容了

目录结构说明

.
├── node_modules 第三方包存储目录
├── public 静态资源目录，内部的静态资源都会被简单的复制，⽽不经过 webpack
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── assets 资源目录，存储图片等资源
│ │ └── logo.png
│ ├── components 公共组件目录
│ │ └── HelloWorld.vue
│ ├── router 路由模块目录
│ │ └── index.js
│ ├── store 容器模块目录（Vuex）
│ │ └── index.js
│ ├── views 路由页面组件目录
│ │ ├── About.vue
│ │ └── Home.vue
│ ├── App.vue 根组件，最终被渲染到 index.html 中的 #app
│ └── main.js 入口文件
├── .browserslistrc 指定项目的目标浏览器范围，会被 @babel/preset-env 和 Autoprefixer 用来确定要转移的 JS 特性与 CSS 前缀
├── .editorconfig 编辑器配置文件，用来维护跨编辑器（或 IDE）的统一代码风格
├── .eslintrc.js ESLint 配置文件
├── .gitignore Git 的忽略配置文件
├── README.md 说明文档
├── babel.config.js Babel 配置文件
├── package-lock.json 记录包安装时的版本号
└── package.json 第三方包的说明文件，记录包的依赖信息等内容

调整初始目录

VueCLI 初始化的项目中有很多的示例文件，应该删除掉，并且添加自己需要的文件和文件目录

• 需要删除的项目用于
  1.src/assets文件夹下面的logo.png
  2.src/components文件夹下面的HelloWorld.vue
  3.src/views文件夹下面的About.vue
  4.src/views文件夹下面的Home.vue
• 新增需要的项目
  1.src/services 文件夹，存放接口功能模块
  2.src/styles 文件夹，用于存放全局样式
  3.src/utlis 文件夹，用于存放工具模块
  调整之后的目录结构为：

.
├── node_modules
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── assets
│ ├── components
│ ├── router
│ │ └── index.js
│ ├── services
│ ├── store
│ │ └── index.js
│ ├── styles
│ ├── utils
│ ├── views
│ ├── App.vue
│ └── main.js
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
└── package.json

• 修改App.vue

<template>
  <div id="app">
      <h1>eduBoss</h1>
    <!-- 跟路由出口 -->
    <router-view/>
  </div>
</template>

<style lang="scss">

</style>

• 修改src/router/index.js 路由模块，删除路由规则，删除Helloworld.vue的引入

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 路由规则
const routes = []

const router = new VueRouter({
  routes
})

export default router

• 将更改后的项目结构更新在github上

git status
git add .
git commit -m "此次更改信息"
git push -u origin master