vue构建一个小项目（一）

学习vue的总结

1.vue开发环境

---

vue
vue-cli
webpack
//利用vue  webpack创建一个项目
vue init webpack vueLitter
//创建的过程中会给一些提示，比如项目名称、vue-router等，如果遇到挨个说明
/*创建成功后，第一步需要做的是安装一次依赖，不然可能会遇到启动不了的问题*/
npm install
//运行项目 默认端口为8080
npm run dev

正常运行成功
 DONE  Compiled successfully in 6919ms                                                                         
 I  Your application is running here: http://localhost:8080

查看目录结构，main.js就是项目的入口文件。

import Vue from 'vue'
import App from './App' //组件
import router from './router' //路由引入

Vue.config.productionTip = false

/* eslint-disable no-new */
/* 创建了vue的实例，
el：为dom元素标识的id
router：引入路由规则
components：自定义组件依赖
*/
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

2.项目需求分析

---

模块	内容
登录	login
列表页	index
详情	detail

我们这次需求很简单，也很常规，就是:
login=>index=>detail，即先登录，登录后通过路由router把控，跳转到列表页index，在列表页index中有筛选和查询条件，每一条数据中对应有查看详情功能，点击又是路由跳转到detail页面。
思路捋清楚了，下面让我们看看，这次开发中都需要什么组件或者框架依赖吧。

名称	详细	描述
路由	vue-router	在npm创建时已安装
UI	mint-ui	本次选择的移动端UI
axios	axios	前后端分离请求组件