关于前端:Vue-2x-从零开始搭建

接上一篇 Vue 3.0 我的项目配置。

自己最近钻研了一遍 Vue 3.0 的英文文档，原本想分享下 API 用法的，后果看了下网上，Vue 3.0 + TypeScript 的教程曾经满天飞了，另外自己搭建的 Vue 3.0 + Element plus 我的项目最近也遇到了不少 bug，所以 Vue 3.0 的内容自己打算先放一放。

网上对于 Vue 3.0 的教程尽管很多，然而简直没有一篇最佳实际。家喻户晓，在 Vue 3.0 中应用 setup 函数开发的格调跟 React 曾经十分靠近，然而很多习惯了 Vue 2.x 的同学可能会不适应，感觉写进去的代码很乱，很难保护。另外还有 ref 语法糖，<script setup>，CSS 变量注入等在提案阶段。自己打算等前面版本稳固了再出一篇最佳实际。

BTW，当初网上有不少人曾经用 Object.defineProperty 实现繁难的 Vue 框架，然而应该还没多少人应用 Proxy 来实现的，自己打算抽空试试，顺带分享一篇教程。

进入正题，这篇教程算是补一下之前的坑，心愿给各位从零开始搭建我的项目的同学提供参考。

1. vue-cli 脚手架装置

全局装置 vue-cli：

$ npm install -g @vue/cli

查看版本：

$ vue -V

自己写这篇文章的时候，最新的版本是 @vue/cli 4.5.11

2. 创立我的项目

执行上面的命令：

$ vue create demo-project

这里 demo-project 替换成本人的项目名称，前面就是傻瓜式装置，这个过程也会拉取依赖放到 node_modules 目录下。期待装置实现，运行上面的命令就能够启动本地开发服务器：

$ npm run serve

如果不分明各种命令，能够到 package.json 外面的 scripts 配置项查看：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

所以执行 npm run serve 其实就是在执行上面的命令：

$ npx vue-cli-service serve [options] [entry]
# --open    在服务器启动时关上浏览器
# --copy    在服务器启动时将 URL 复制到剪切版
# --mode    指定环境模式 (默认值：development)
# --host    指定 host (默认值：0.0.0.0)
# --port    指定 port (默认值：8080)
# --https   应用 https (默认值：false)

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)

咱们看到，这个命令反对传递命令行参数，用于设置本地开发服务器的各种配置。当然每次都在命令行中输出显然太麻烦，所以理论我的项目开发都是在 vue.config.js 中进行设置的，上面会介绍。

3. 配置文件

启动我的项目的时候，默认是没有浏览器主动关上的，默认端口也是 8080，如果想批改配置，能够到根目录下创立一个配置文件 vue.config.js，这些配置会被 webpack-merge 合并到最终的 Webpack 配置外面。这里配置的内容比拟多，能够依据本人的须要进行配置。

// vue.config.js
module.exports = {
    publicPath: '/',
    ourputDir: 'dist',
    assetsDir: 'assets',
    indexPath: 'index.html',
    filenameHashing: true,
    pages: undefined,
    lintOnSave: process.env.NODE_ENV !== 'production',
    runtimeCompiler: false,
    transpileDependencies: [],
    productionSourceMap: false,
    css: {
        requireModuleExtension: true,
        extract: process.env.NODE_EVN === 'production',
        sourceMap: false,
        loaderOptions: {}},
    parallel: true,
    pluginOptions: {},
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8066,
        https: false,
        hotOnly: false,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:7001'
                changeOrigin: true
            }
        }
    },
    configureWebpack: config => {if (process.env.NODE_ENV === 'production') {// 为生产环境批改配置} else {// 为开发环境批改配置}
    }
}

Vue CLI 配置参考

4. 动态资源

应用 . 结尾的相对路径，所有诸如 ![](...)、background: url(...) 和 CSS @import 的资源 URL，会被 Webpack 解决，解析为一个模块依赖，例如：

import './style.less'
// 会被编译为
require('./style.less')

转换规则

如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变

如果 URL 以 . 结尾，它会作为一个绝对模块申请被解释且基于你的文件系统中的目录构造进行解析

如果 URL 以 ~ 结尾，其后的任何内容都会作为一个模块申请被解析。这意味着你甚至能够援用 Node 模块中的资源

如果 URL 以 @ 结尾，它也会作为一个模块申请被解析。它的用途在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @。(仅作用于模版中)

须要留神的是，public 目录下的动态资源不会被 Webpack 解决，只会被简略复制到打包的目录中，因而 public 目录下的资源要应用绝对路径援用。

5. CSS 预处理器

应用 Vue CLI 创立的我的项目曾经在 Webpack 的配置中反对了各种 CSS 预处理器，只须要装置依赖就能够间接在我的项目中应用：

$ npm install -D less-loader less

6. 环境变量

7. 配置 Vue router

装置 vue-router：

$ npm install vue-router

在 src 目录下建一个 router 目录：

- src
  |- router
     |- index.js

index.js 内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import getCookie from '@/utils/cookies'

Vue.use(Router);

const meta = {requiresAuth: true, // 须要鉴权};
const router = new Router({
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            component: () => import('@/views/Login.vue')
        },
        {
            path: '/activity',
            component: () => import('@/views/Activity.vue'),
            meta: {...meta,}
        }
    ]
})

router.beforeEach((to, from, next) => {if (to.meta.requiresAuth) {
        // 须要鉴权
        const token = getCookie("token");
        if (token && token !== 'undefined') {next();
        } else {next("/login");
        }
    } else {
        // 不须要身份校验 间接通过
        next();}
})

export default router;

而后在 main.js 中增加如下内容：

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入路由模块

Vue.config.productionTip = false

new Vue({
  router, // 应用路由
  render: h => h(App),
}).$mount('#app')

8. 配置 vuex

装置 vuex：

$ npm install vuex

而后在 src 目录下建一个 store 目录：

- src
  |- store
     |- index.js
     |- state.js
     |- getters.js
     |- mutations.js
     |- actions.js

各个模块内容如下：

// state.js
const state = {}
export default state

// getters.js
const getters = {}
export default getters

// mutations.js
const mutations = {}
export default mutations

// actions.js
const actions = {}
export default actions

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)

const store = new Vuex.store({
    state,
    getters,
    mutations,
    actions,
})

export default store

而后在 main.js 中增加如下内容：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' // 引入 vuex

Vue.config.productionTip = false

new Vue({
  router,
  store, // 应用 vuex
  render: h => h(App),
}).$mount('#app')

9. 引入 antd vue 组件库

装置 ant-design-vue：

$ npm install ant-design-vue

而后在 main.js 中引入组件库及款式文件，这边采纳的是全量引入：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue' // 引入 Antd 组件库
import 'ant-design-vue/dist/antd.css'; // 引入 Antd 款式

Vue.config.productionTip = false

Vue.use(Antd) // 应用 Antd 组件库

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

全量引入打包会慢一些，如果想按需加载，能够参考官网教程

https://www.antdv.com/docs/vu…

10. 配置 axios

装置 axios：

$ npm install axios

在 src 目录下创立两个目录：

- src
  |- api
  |  |- systemInfo.js
  |- utils
     |- request.js

在 request.js 中增加以下代码：

import axios from 'axios'

const service = axios.create({
    baseURL: '/',
    timeout: 1000000, // 申请超时工夫
})

export default service

对于 axios 的封装这里不具体开展

而后在 systemInfo.js 中增加以下代码：

import request from '/@/utils/request'

let systemInfo = {};
systemInfo.login = function(data) {
    return request({
        url: '/api/fin-services/v1/system-info/login',
        data,
        method: 'post'
    })
}

export default systemInfo

在接口申请之前，确保 vue.config.js 中设置了代理，否则跨域申请会被浏览器同源策略阻止：

module.exports = {
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8066,
        https: false,
        hotOnly: false,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:7001' // 后端理论地址
                changeOrigin: true
            }
        }
    },
}

后端如果响应头设置了 ACAO 也能够不必代理

vue-cli 文档：

https://cli.vuejs.org/zh/guid…

配置参考：

https://cli.vuejs.org/zh/conf…