一、写在前边
公司项目要做前后端分离,基本上没有犹豫就选了node+vue的组合模式,原因是这俩太太太火了,我要追随时代的潮流。
项目改版迫在眉睫,从头一点一点的学也来不及了,所以直接选用了快去构建项目的工具,天下武功唯快不破。
嗯,没错,是这么回事。
经过了一分钟激烈的思想斗争,秉承着新的就是最好的,一切都用最新的!
最后定的模式为:后端:egg(阿里开源的node.js框架)+前端:vue 全家桶(vue + vue-cli + vue-router + vuex + axios)
我也处在小白学习阶段,这些文章也算是学习笔记。目前构建项目大部分还是依靠官网demo和度娘搜索,然后照葫芦画瓢,很多东西也是按照自己的理解在描述,有不到位的请指出,请轻喷! 另外,vue和node一些简单的基础还是要过一遍,不然真的一脸懵。 框架和脚手架让开发大大便利,但基础知识也是很重要的。
当然了,说好了快速构建,就一定要快速构建,那么前端开发框架UI库也是必不可少。
纠结了十几秒,选择了饿了么团队开发的element ui。
最终为:vue全家桶 + egg + element ui
二、环境准备 操作系统为 windows
(一)安装Node.js和npm(建议安装最新版)
1、官网下载安装包 https://nodejs.org/zh-cn/download/
(1)Windows 安装包 (.msi)
下载安装包之后点击进行安装即可。
在Windows上安装时务必选择全部组件,包括勾选Add to Path
。
(2)Windows 二进制文件 (.zip)
①配置npm安装目录。
解压该文件,在解压之后的文件路径下创建两个文件夹:node_global(npm全局安装位置)和node_cache(npm 缓存路径)。
②修改环境变量
将node.exe所在目录到环境变量中。
将%NODE_PATH%和%NODE_PATH%node_global加入到Path变量中
③配置全局安装和缓存路径
npm config set prefix E:node-v12.14.1-win-x64node_global
npm config set cache E:node-v12.14.1-win-x64node_cache
记得修改为自己的为文件路径哦~
2、检测是否安装成功
npm已经在Node.js安装的时候顺带安装好了。
安装完成后,在Windows环境下,请打开命令提示符,然后输入node -v
和npm -v
,输出版本号即为安装正确。
(二)vue全家桶
1、vue cli
npm install -g @vue/cli
然后输入vue --version,输出版本号即为安装正确。
2、快速构建项目
vue ui
上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。
根据操作,填写项目名称,选好配置,点击构建项目,等待项目初始化。
默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。
在这里我们选择手动。
点击下一步,选择需要安装的(Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter、Unit Testing、使用配置文件):
重要补充:不要选择Linter / Formatter。格式校验过于严格,改到崩溃ing…… 如何关闭格式校验? 项目创建好后会生成 .eslintrc.js文件,找到该文件,注释掉 @vue/standard 即可。
点击创建项目,项目初始化完成之后会进入项目管理页面。
点击任务-serve-运行,之后点击启动app,可看到项目初始化页面。
至此,项目初始化已完成。
(三)element ui
- 在项目所在文件夹下运行以下命令:
npm i element-ui -S
- 在main.js中添加一下代码:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
(四)axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
- 在项目所在文件夹下运行以下命令:
npm install axios
- 在
src
目录下创建utils/
, 并创建request.js
用来封装axios
import axios from 'axios'
// 创建axios实例
const instance = axios.create({
baseURL: 'http://test.apiserver.com/', // api的base_url
timeout: 15000, // 请求超时时间
headers: {
'key': 'value'
}
})
// 拦截请求
instance.interceptors.request.use(config => {
// 发送请求之前做些什么
return config
}, error => {
// 请求错误做些什么
return Promise.reject(error)
})
// 拦截响应
instance.interceptors.response.use(res => {
// 对响应数据做些什么
return res
}, error => {
// 对响应错误做些什么
return Promise.reject(error)
})
export default instance
- 在
src/
下创建api
目录,用来统一管理所有的请求:
例如创建user.js:
import request from '@utils/request.js'
export default{
login(data){
return request({
url:'/login/',
method:'post',
data,
})
}
}
这样的好处是方便管理、后期维护,还可以和后端的微服务对应,建立多文件存放不同模块的api
。剩下的就是你使用到哪个api时,自己引入便可。
至此,前端项目所需的配置均已完成。
更多相关文章:
vue系列:vue项目目录结构详解(A02)
vue系列:常见问题与使用技巧汇总