使用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 版本管理
1.创建github仓库的一些选项：
- Repository name：仓库名
- Description：仓库描述信息
- Public：公开
- Private：私人
由于使用vueCLI创建的项目，有README.flie，.gitignore git版本管理等等内容，不需要勾选下面三个配置
2.获取到项目的http链接，使用
git remote add origin 远程项目地址
添加远程项目地址
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
