前言
github地址： github.com/LeeStaySmal… (完整分支：optimize分支)
demo地址： vue-project-demo.eloco.cn
安装与初始化架构
安装
node >= 8.9 推荐：8.11.0 +
安装：npm install -g @vue/cli
检查：vue --version
如果已安装旧版本，需要先npm uninstall vue-cli -g 卸载掉旧版本。
初始化架构
创建：vue create project-name
image
注：项目名称不能驼峰命名。
选择一个预设（这里我选择更多功能）：
image
选择需要安装的（Babel、Router、Vuex、Pre-processors、Linter / Formatter）：
image
是否使用history路由模式（Yes）：
image
选择css 预处理器（Sass/SCSS）：
image
选择eslint 配置（ESLint + Standard config）：
image
选择什么时候执行eslint校验（Lint on save）：
image
选择以什么样的形式配置以上所选的功能（In dedicated config files）：
image
是否将之前的设置保存为一个预设模板（y）：
image
如果选择 y 会让输入名称，以便下次直接使用，否则直接开始初始化项目。
最后，看一下生成的基本架构目录：
image
在项目中优雅的使用svg
首先在/src/components 创建 SvgIcon.vue：
image
参考：未来必热：SVG Sprite技术介绍 - 张鑫旭
在src/下创建 icons文件夹，以及在其下创建svg文件夹用于存放svg文件，创建index.js作为入口文件：
image
编写index.js 的脚本：
import Vue from ‘vue’
import SvgIcon from ‘@/components/SvgIcon.vue’ // svg组件
// 全局注册
Vue.component(‘svg-icon’, SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context(’./svg’, false, /.svg$/)
requireAll(req)
复制代码
使用svg-sprite-loader对项目中使用的svg进行处理：
npm install svg-sprite-loader --save-dev；
修改默认的webpack配置， 在项目根目录创建vue.config.js，代码如下；
const path = require(‘path’)
function resolve(dir) {
return path.join(__dirname, ‘./’, dir)
}
module.exports = {
chainWebpack: config => {
// svg loader
const svgRule = config.module.rule(‘svg’) // 找到svg-loader
svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
svgRule // 添加svg新的loader处理
.test(/.svg$/)
.use(‘svg-sprite-loader’)
.loader(‘svg-sprite-loader’)
.options({
symbolId: ‘icon-[name]’
})
// 修改images loader 添加svg处理
const imagesRule = config.module.rule('images')
imagesRule.exclude.add(resolve('src/icons'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
}
}
复制代码
最后，在main.js 中引入import '@/icons’即可；
// 使用示例
复制代码
PS：至于svg ，个人比较建议使用阿里开源的图标库 iconFont
axios封装api、模块化vuex
axios篇
项目中安装axios： npm install axios；
在src目录下创建utils/， 并创建request.js用来封装axios，上代码：
import axios from ‘axios’
// 创建axios 实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 10000 // 请求超时时间
})
// request 拦截器
service.interceptors.request.use(
config => {
// 这里可以自定义一些config 配置
return config
},
error => {
// 这里处理一些请求出错的情况
console.log(error)
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
const res = response.data
// 这里处理一些response 正常放回时的逻辑
return res
},
error => {
// 这里处理一些response 出错时的逻辑
return Promise.reject(error)
}
)
export default service
复制代码
既然要使用axios ，必不可少的需要配置环境变量以及需要请求的地址，这里可以简单的修改poackage.json:
“scripts”: {
“dev”: “vue-cli-service serve --project-mode dev”,
“test”: “vue-cli-service serve --project-mode test”,
“pro”: “vue-cli-service serve --project-mode pro”,
“pre”: “vue-cli-service serve --project-mode pre”,
“build:dev”: “vue-cli-service build --project-mode dev”,
“build:test”: “vue-cli-service build --project-mode test”,
“build:pro”: “vue-cli-service build --project-mode pro”,
“build:pre”: “vue-cli-service build --project-mode pre”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
},
复制代码
同时修改vue.config.js：
const path = require(‘path’)
function resolve(dir) {
return path.join(__dirname, ‘./’, dir)
}
module.exports = {
chainWebpack: config => {
// 这里是对环境的配置，不同环境对应不同的BASE_API，以便axios的请求地址不同
config.plugin(‘define’).tap(args => {
const argv = process.argv
const mode = argv[argv.indexOf(’–project-mode’) + 1]
args[0][‘process.env’].MODE = "${mode}"
args[0][‘process.env’].BASE_API = ‘“http://47.94.138.75:8000”’
return args
})
// svg loader
const svgRule = config.module.rule('svg') // 找到svg-loader
svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
svgRule // 添加svg新的loader处理
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
// 修改images loader 添加svg处理
const imagesRule = config.module.rule('images')
imagesRule.exclude.add(resolve('src/icons'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
}
}
复制代码
如何使用？ 我比较建议在src/下创建api目录，用来统一管理所有的请求，比如下面这样：
image
这样的好处是方便管理、后期维护，还可以和后端的微服务对应，建立多文件存放不同模块的api。剩下的就是你使用到哪个api时，自己引入便可。
拓展：服务端的cors设置
牵涉到跨域，这里采用cors，很多朋友在面试中经常会被问到cors的实现原理，这个网上有很多理论大多是这样讲的：
image
其实，这样理解很抽象，服务器端到底是怎么做验证的？
这里大家可以通俗的理解为后端在接收前端的request请求的时候，会有一个request拦截器，像axios response拦截器一样。下面以php lumen框架为例，来深入理解一下这个流程：
<?php namespace App\Http\Middleware; use App\Http\Utils\Code; use Closure; use Illuminate\Http\Response; use Illuminate\Support\Facades\Log; class CorsMiddleware { private $headers; /** * 全局 ： 解决跨域 * @param $request * @param \Closure $next * @return mixed * @throws \HttpException */ public function handle($request, Closure $next) { //请求参数 Log::info('http request：'.json_encode(["request_all" => $request->all()])); $allowOrigin = [ 'http://47.94.138.75', 'http://localhost', ]; $Origin = $request->header("Origin"); $this->headers = [ 'Access-Control-Allow-Headers' => 'Origin,x-token,Content-Type', 'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Credentials' => 'true',//允许客户端发送cookie 'Access-Control-Allow-Origin' => $Origin, //'Access-Control-Max-Age' => 120, //该字段可选，间隔2分钟验证一次是否允许跨域。 ]; //获取请求方式 if ($request->isMethod('options')) { if (in_array($Origin, $allowOrigin)) { return $this->setCorsHeaders(new Response(json_encode(['code' => Code::SUCCESS, "data" => 'success', "msg" => ""]), Code::SUCCESS)); } else { return new Response(json_encode('fail', 405)); } } $response = $next($request); //返回参数 Log::info('http response：'.json_encode($response)); return $this->setCorsHeaders($response); } /** * @param $response * @return mixed */ public function setCorsHeaders($response) { foreach ($this->headers as $key => $val) { $response->header($key, $val); } return $response; } } 复制代码 vuex 篇 如果创建项目的时候，选择了vuex，那么默认会在src目录下有一个store.js作为仓库文件。但在更多实际场景中，如果引入vuex，那么肯定避免不了分模块，先来看一下默认文件代码： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { } }) 复制代码 那么现在改造一下，比如先划分出app、user两个模块，可以这样： import Vue from 'vue' import Vuex from 'vuex' import app from './store/modules/app' import user from './store/modules/user' import getters from './store/getters' Vue.use(Vuex) const store = new Vuex.Store({ modules: { app, user }, getters }) export default store 复制代码 在src/下创建store/目录： image app module 可以用来存储应用的状态，比如接下来要讲到的全局loading，或者控制第三方组件的全局大小，比如element ui中的全局组件size； user module 可以用来存储当前用户的信息； 当然，store 配合本地存储比较完美，这里采用js-cookie。 全局loading、合理利用vue router守卫 全局loading 上面说完了axios、vuex，现在结合之前说一下设置全局loading效果。 平常写代码每个请求之前一般都需要设置loading ，成功之后结束loading效果，这就迫使我们不得不写大量重复代码，如果不想这样做，可以结合axios和vuex统一做了。 首先，在说vuex的时候，我在src/下创建了一个store，现在就在store/modules/app.js 写这个Loading效果的代码; const app = { state: { requestLoading: 0 }, mutations: { SET_LOADING: (state, status) => { // error 的时候直接重置 if (status === 0) { state.requestLoading = 0 return } state.requestLoading = status ? ++state.requestLoading : --state.requestLoading } }, actions: { SetLoading ({ commit }, status) { commit('SET_LOADING', status) } } } export default app 复制代码 再来修改一下utils/request.js import axios from 'axios' import store from '@/store' // 创建axios 实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 10000 // 请求超时时间 }) // request 拦截器 service.interceptors.request.use( config => { // 这里可以自定义一些config 配置 // loading + 1 store.dispatch('SetLoading', true) return config }, error => { // 这里处理一些请求出错的情况 // loading 清 0 setTimeout(function () { store.dispatch('SetLoading', 0) }, 300) console.log(error) Promise.reject(error) } ) // response 拦截器 service.interceptors.response.use( response => { const res = response.data // 这里处理一些response 正常放回时的逻辑 // loading - 1 store.dispatch('SetLoading', false) return res }, error => { // 这里处理一些response 出错时的逻辑 // loading - 1 store.dispatch('SetLoading', false) return Promise.reject(error) } ) export default service 复制代码 其次，在src/components/下创建 RequestLoading.vue 组件：
扫一扫
3109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
