上篇说到开发开始之前。
需求已经有了，具体的框架工具库已经搭建完毕，后续要扩展再议。
然后就应该是跟着需求开发了。
开发之前说了些基本要求。
第三篇内容关于使用的一些环境，工具有什么用
了解环境，了解工具的最好办法就是去对应的官网读导航；
然后获取别人的总结以便于快速了解；最后写出自己的总结。
最重要的一点，最消耗时间的一点，练习练习再练习。
官方链接集合
-
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路由的各种功能。单文件组件的使用。
深入：构建工具的具体代码解析。
网友评论