vue项目搭建并设计简单的架构(2019-07-13---15)

作者: 你滴止痛药儿 | 来源:发表于2019-07-15 15:20 被阅读49次

准备阶段

安装nodejs、npm

全局安装vue、vue-cli

全局安装webpack

在合适的位置建一个项目文件夹

开始

打开你的Terminal（MAC）或者cmd（windows）
一路cd到你的项目文件夹
通过vue-cli脚手架搭建项目：vue init webpack xxx xxx为你的项目名
设置项目名、描述、作者、是否使用vue-router（使用）、是否使用ESLint（虽然很有用但是我不喜欢用哈哈）、单元测试（不需要）、e2e （NO）、使用npm...反正就是一路回车，看自己需求搭建。

项目初始化
用vscode打开项目，在终端处cd到初始化的项目目录运行npm start

npm start

好了项目初始化搞定✌️
打开你的浏览器输入http://localhost:8080就可以看到Vue的界面了

简单设计项目架构

项目有一个设计合理的架构是非常重要的，不同的文件不同的代码做着不同的工作，我们现在要给他们划分开，一人一个坑😄
新建几个文件夹让你的自动生成的项目目录长成这样 /* 👇 */

项目目录结构

utils工具类

在这里我们定义一些开发时会用到的工具类，例如封装axios、时间格式化工具、封装本地存储等

屏幕快照 2019-07-13 下午3.13.28.png

例子：http.js 简单封装axios
baseURL就是你要访问的地址的ip和端口号

import axios from 'axios'

let httpInstance = axios.create()

// httpInstance.defaults.baseURL = 'http://172.20.10.2:3001'//iphone热点
// httpInstance.defaults.baseURL = 'http://172.30.10.127:3001' //公司ip
//httpInstance.defaults.baseURL = 'http://39.97.114.146:3001' //服务器地址
// httpInstance.defaults.baseURL = 'http://192.168.1.109:3001' //软件园5号楼宿舍
httpInstance.defaults.baseURL = 'https://api.apiopen.top/' //发放接口


httpInstance.defaults.timeout = 5000

//POST 请求
httpInstance.formurl = (url, data, config) => {
  return httpInstance.post(url, data, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    ...config
  })
};

//  request拦截器
httpInstance.interceptors.request.use(
  config => {
    //这里写拦截后你需要的操作
    //例如：
    // if (store.getters.token) {
    //   config.headers['Authoriztion'] = store.getters.token; //让每个请求都携带token
    // }
    // config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    return config
  },
  error => {
    console.log('err' + error) //only for debug ～～～
    return Promise.reject(error)
  }
)
//  reponse拦截器
httpInstance.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response)
    }
  },
  error => {
    return Promise.reject(error)
  }
)
export default httpInstance

api.js 接入后端服务的api管理

对所有访问后端的接口进行统一管理可以使复杂的系统变得有条理，可以使开发时候思路更清晰，也方便管理维护，我们建一个api文件夹，不同类别的接口各自定义在自己的模块中，那里出错就去哪里找问题。

api管理

例子：userApi.js

import HttpUtils from '../utils/http'

const UserApi = {
  userLogin: (params) => {
    let url = '/login';
    return HttpUtils.post(url, params)
  },
  userRegist: (params) => {
    let url = '/regist';
    return HttpUtils.post(url, params)
  }
}

export default UserApi;

在业务界面调用接口时直接使用定义好的接口就ok啦👌 /* 👇 */

import UserApi from "../api/userApi";

UserApi.userLogin({ account: 666 , password: 'wozhende666' })
  .then(res => {
     console.log(res);
   })
  .catch(err => {
     console.log(err);
   });

这样最终访问的地址就是http.js中的baseURL+userApi.js中定义的接口:
https://api.apiopen.top/login 也就是后端接口放的地方，把公共部分提取出来为baseURL，不同的接口在api管理中来区分✌️

项目路由router

由前端来控制页面的跳转（但其实是个单页面），根据不同的 url 地址展示不同的内容和页面。
优点：体验好，不需要每次从服务器获取全部，快速展现给用户；
缺点：不利于SEO；使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存；单页面无法记住之前滚动的位置，无法在前进和后退的时候记住滚动的位置。

路由的结构设计可以按自己的项目页面结构情况来设计
我一般的习惯是将头部，底部等公共的部分抽离出来放到外层，各个业务界面定义为子路由
举个🌰 /* 👇 */

import Vue from 'vue'
import Router from 'vue-router'
import Home from "../views/home";
import Index from '../views/index'
import FirstPage from '../views/firstpage/firstpage.vue'
Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'home',
    component: Home,
    redirect: '/index', //配置默认子路由为index
    children: [{
      path: '/index',
      name: 'index',
      component: Index,
    }, {
      path: '/firstpage',
      name: 'firstpage',
      component: FirstPage,
    }]
  }]
})

页面结构

view下有个 home.vue是入口页面，页面的头部和底部抽离出来在这里使用，在头部和底部之间又定义了一层二级路由（在router.js中配置了children）index.vue是首页，其他页面文件按功能不同进行分类，在定义路由的时候要弄清楚层级关系
home.vue代码如下：

<template>
  <div>
    <top-header></top-header>
    <router-view></router-view>
    <top-footer></top-footer>
  </div>
</template>

<script>
import TopHeader from "../components/layout/top_header";
import TopFooter from "../components/layout/top_footer";
export default {
  name: "",
  components: { TopHeader, TopFooter },
  data() {
    return {};
  }
};
</script>

<style scoped>
</style>

效果如下

如图地址改变只是改变了中间需要改变的部分，头部和底部不用重新渲染，同时在写代码的时候也不需要每次都写那些代码，方便多了不是吗？

状态管理

由于前端技术爆发式发展，SPA、组件化、模块化等概念被炒的飞起，项目中各个模块如果需要共同状态或者说数据的话，就需要组件间通讯，但是如果业务结构一层套一层，数据状态在父、子、孙、曾孙... 之间传递的时候很容易就乱了，于是在项目比较大的时候，出于对项目架构的灵活性考虑就要使用状态管理。
常见的状态管理技术：mobx Vuex Reduex

简单来说说vuex

在store文件夹下新建store.js
store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  name: 'store',
  state: {
    //定义要进行状态管理的数据
    count: 0
  },
  //改变state的属性的值的方法放在mutations里
  mutations: {
    increment(state) {
      state.count += 1
    },
    decrement(state) {
      state.count -= 1
    }
  }
})

在main.js中将store挂载到全局下每一个组件上

import store from './store/store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

当你需要使用store中的某一数据时，你可以这样：
{{$store.state.count}}对没错，就是直接用哈哈
这里要记住一定不要忘了$，我就老忘🤦‍♂️
当要改变数据的状态时，要把改变数据的逻辑写在store.js的 mutaiins 中👆 请看上上个图
使用时是这样👇
index.vue

<template>
  <div>
    <button @click="$store.commit('increment')">+</button>    
    <button @click="$store.commit('decrement')">-</button>
    <button @click="change">change</button>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  created() {},
  methods: {
    change() {
      this.$store.commit({
        type: "decrement",
        amount: 10
      });
    }
  }
};
</script>

<style scoped>
</style>

直接在行内调用。或者像第三个按钮一样绑定事件都可以。

🎉因为我太懒了，状态管理还有许多更方便有趣的内容，这里只是提了冰山一角，最最最基础的使用
🎉这篇文章最初开始写的目的只是因为每次建项目总是觉得不完美，这里那里差点东西的样子，撸个文巩固一下，并且也规范一下自己建一个合理、逻辑清晰的目录结构
🎉关于架构部分，本人还是个前端小学生，在这里根据自己对项目结构的理解，觉得哪些技术在工程中需要就设计了哪些，如果又不合理或者有错误的地方还请指正！
🎉如果觉得哪里还需要完善欢迎留言！
🎉本篇还会继续修正、更新。
🎉求点赞、分享。转发请备注作者出处
志同道合的小伙伴可以加微信:tong961790😄

网友评论

本文标题：vue项目搭建并设计简单的架构(2019-07-13---15)

本文链接：https://www.haomeiwen.com/subject/oihehctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！