从 0 到 1 的 WEB 前端项目（三）

上篇说到开发开始之前。
需求已经有了，具体的框架工具库已经搭建完毕，后续要扩展再议。
然后就应该是跟着需求开发了。
开发之前说了些基本要求。
第三篇内容关于使用的一些环境，工具有什么用

了解环境，了解工具的最好办法就是去对应的官网读导航；
然后获取别人的总结以便于快速了解；最后写出自己的总结。
最重要的一点，最消耗时间的一点，练习练习再练习。

官方链接集合

• nodejs en
  nodejs cn
  服务运行环境；提供本地服务器；文件操作；文件管理的环境。
• npm
  包管理器；为模块提供便捷的下载以及依赖管理。
• vue
  官方仓库
  前端框架；加快开发效率；提供数据绑定；配套路由vue-router，状态管理vuex
• git
  版本管理工具；帮助我们对开发的每个版本进行记录
• Webpack
  前端打包工具，整合所有的文件；可兼职自动化工具，替代所有能够替代的手动操作。
• element-UI
  UI组件。已经封装好的视图，即开即用；好处：快速方便省心；坏处：灵个性化定制不便。
• Mockjs
  数据接口测试，提供模拟数据
• axios
  提供封装的ajax

---

vue-cli 最便捷的开始方式

官方提供的自动化工具，即开即用。

npm install -g @vue/cli
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev

捕获.PNG

熟悉项目目录

捕获1.PNG

运用 vue-cli 工具创建项目之后会自动安装依赖环境。
目录详情如下：

• .vscode
  编辑器配置文件
• build
  构建工具的详细代码，开发环境及生产环境的配置。
  包括 webpack vue-loader。
• config
  如名，配置文件
• dist
  构建的版本输出目录。可自行修改。
• doc
  个人文档目录。

• src
  开发目录。包含 main.js 及其他。

  
  
  

  捕获11.PNG
• static
  静态资源目录。
• .babelrc
  .editorconfig
  .gitignore
  .postcssrc.js
  其他配置文件
• index.html
  最终 模板。
• package.json
  npm 的配置文件，记录，项目的基本信息，以及各种依赖。
  使用 npm i 能十分方便的安装。

---

导入各种库

在主入口导入全局使用的各类库。
main.js

import Vue from 'vue'
import VueRouter from "vue-router"
import routes from './router/router'

// 导入 ui、主题配置
import Element from "element-ui"
import 'element-ui/lib/theme-chalk/index.css'
import 'normalize.css'
// import './element-variables.scss'

// 导入测试数据接口
import './mock/mock'

Vue.config.productionTip = false

Vue.use(Element)
Vue.use(VueRouter)
const router = new VueRouter({
  routes
})
/* eslint-disable no-new */
new Vue({
  router
}).$mount("#app")

qs：axios 在index.html 采用script 引入cdn。

分割功能，排期码代码

大致方向。
文件流向： main.js < 路由 < 组件
程序走向： main.js > 路由 > 组件

路由分发
文档
根据需求写出路由，由路由定出一块块功能。
具体组件
整个项目就是组件的组装；组件化开发。

---

基础：vue路由的各种功能。单文件组件的使用。

深入：构建工具的具体代码解析。