准备阶段
- 安装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
好了 项目初始化搞定✌️
打开你的浏览器输入http://localhost:8080就可以看到Vue的界面了
简单设计项目架构
项目有一个设计合理的架构是非常重要的，不同的文件不同的代码做着不同的工作，我们现在要给他们划分开，一人一个坑😄
新建几个文件夹让你的自动生成的项目目录长成这样 /* 👇 */
utils工具类
在这里我们定义一些开发时会用到的工具类，例如封装axios、时间格式化工具、封装本地存储等
例子：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文件夹，不同类别的接口各自定义在自己的模块中，那里出错就去哪里找问题。
例子：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😄
