乐趣区

关于vue.js:Vue3-全家桶-TS-Vite2-elementplus-搭建简洁时尚的博客网站实战及踩坑记

jiezi

五一期间，花了 3 天工夫，边学 Vue3 和 Vite2，边重构本人的我的项目，终于都用 Vue3 + TypeScript + Vite2 + Vuex4 + Vue-Router4 + element-plus 重构完啦！

终于实现一项心心念念的 2021 年度指标了 ✌️

我的项目地址:

https://github.com/biaochenxuying/blog-vue-typescript

成果

效果图：

  • pc 端

  • 挪动端

残缺成果请看：

https://biaochenxuying.cn

性能

曾经实现性能

  • [x] 登录
  • [x] 注册
  • [x] 文章列表
  • [x] 文章归档
  • [x] 标签
  • [x] 对于
  • [x] 点赞与评论
  • [x] 留言
  • [x] 历程
  • [x] 文章详情（反对代码语法高亮）
  • [x] 文章详情目录
  • [x] 挪动端适配
  • [x] github 受权登录

⬆️ 返回顶部

前端次要技术

所有技术都是以后最新的。

  • vue：^3.0.5
  • typescript : ^4.1.3
  • element-plus: ^1.0.2-beta.41
  • vue-router : ^4.0.6
  • vite: ^2.2.3
  • vuex: ^4.0.0
  • axios: ^0.21.1
  • highlight.js: ^10.7.2
  • marked：^2.0.3

1. 初化化我的项目

用 vite-app 创立我的项目

yarn create vite-app <project-name>

# 或者
npm init vite-app <project-name>

而后依照提醒操作即可！

进入我的项目，装置依赖

cd <project-name>

yarn # 或 npm i

运行我的项目

yarn dev

关上浏览器 http://localhost:3000 查看

2. 引入 TypeScript

在创立我的项目的时候能够 TypeScript 的，如果你抉择了 TypeScript，能够疏忽第 2 个步骤。

退出 ts 依赖

yarn add --dev typescript

在 我的项目根目录下创立 TypeScript 的配置文件 tsconfig.json

{
  "compilerOptions": {
    // 容许从没有设置默认导出的模块中默认导入。这并不影响代码的输入，仅为了类型查看。"allowSyntheticDefaultImports": true,
    
    // 解析非绝对模块名的基准目录
    "baseUrl": ".",

    "esModuleInterop": true,

    // 从 tslib 导入辅助工具函数（比方 __extends，__rest 等）"importHelpers": true,

    // 指定生成哪个模块零碎代码
    "module": "esnext",

    // 决定如何解决模块。"moduleResolution": "node",

    // 启用所有严格类型查看选项。// 启用 --strict 相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict，// --strictNullChecks 和 --strictFunctionTypes 和 --strictPropertyInitialization。"strict": true,

    // 生成相应的 .map 文件。"sourceMap": true,

    // 疏忽所有的申明文件（*.d.ts）的类型查看。"skipLibCheck": true,

    // 指定 ECMAScript 指标版本 
    "target": "esnext",
    
    // 要蕴含的类型申明文件名列表
    "types": [ ],

    "isolatedModules": true,

    // 模块名到基于 baseUrl 的门路映射的列表。"paths": {
      "@/*": ["src/*"]
    },
    // 编译过程中须要引入的库文件的列表。"lib": [
      "ESNext",
      "DOM",
      "DOM.Iterable",
      "ScriptHost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

在 src 目录下新加 shim.d.ts 文件

/* eslint-disable */
import type {DefineComponent} from 'vue'

declare module '*.vue' {const component: DefineComponent<{}, {}, any>
  export default component
}

把 main.js 批改成 main.ts

在根目录，关上 Index.html

<script type="module" src="/src/main.js"></script>
批改为：<script type="module" src="/src/main.ts"></script>

3. 引入 eslint

装置 eslint prettier 依赖

@typescript-eslint/parser @typescr ipt-eslint/eslint-plugin 为 eslint 对 typescript 反对。

yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescr ipt-eslint/eslint-plugin

在根目录下建设 eslint 配置文件：.eslintrc.js

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {jsx: true}
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  rules: {
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    'vue/custom-event-name-casing': 'off',
    'no-use-before-define': 'off',
    // 'no-use-before-define': [
    //   'error',
    //   {
    //     functions: false,
    //     classes: true,
    //   },
    // ],
    '@typescript-eslint/no-use-before-define': 'off',
    // '@typescript-eslint/no-use-before-define': [
    //   'error',
    //   {
    //     functions: false,
    //     classes: true,
    //   },
    // ],
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^h$',
        varsIgnorePattern: '^h$'
      }
    ],
    'no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^h$',
        varsIgnorePattern: '^h$'
      }
    ],
    'space-before-function-paren': 'off',
    quotes: ['error', 'single'],
    'comma-dangle': ['error', 'never']
  }
};

建设 prettier.config.js

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false, // 未尾逗号
  vueIndentScriptAndStyle: true,
  singleQuote: true, // 单引号
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'none', // 未尾分号
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'lf'
}

4. vue-router、vuex

npm install vue-router@4 vuex

4.1 vuex

在根目录下创立 store/index.ts

import {InjectionKey} from 'vue'
import {createStore, Store} from 'vuex'

export interface State {count: number}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({state() {
    return {count: 0}
  },
  mutations: {increment(state) {state.count++}
  }
})

main.ts 批改

import {createApp} from 'vue'
import {store, key} from './store'
import App from './App'
import './index.css'

const app = createApp(App)

app.use(store, key)

app.mount('#app')

components/HelloWord.vue 批改

<template>
  <h1>{{msg}}</h1>
  <button @click="inCrement"> count is: </button>
  <p>{{count}}</p>
</template>

<script>
  import {defineComponent, computed} from 'vue'
  import {useStore} from 'vuex'
  import {key} from '../store'

  export default defineComponent({
    name: 'HelloWorld',
    props: {
      msg: {
        type: String,
        default: ''
      }
    },
    setup() {const store = useStore(key)

      const count = computed(() => store.state.count)

      return {
        count,
        inCrement: () => store.commit('increment')
      }
    }
  })
</script>

4.2 vue-router

在 src 目录下建设 router/index.ts，内容如下：

import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
import HelloWorld from "../components/HelloWorld.vue";

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "HelloWorld",
        component: HelloWorld,
    },
    {
        path: "/about",
        name: "About",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import(/* webpackChunkName: "About" */ "../components/About.vue")
    }
];

const router = createRouter({history: createWebHistory(process.env.BASE_URL),
    routes,
});

export default router;

再新建一个 components/About.vue 文件，内容如下：

<template>
  <img
    alt="Vue logo"
    src="../assets/logo.png"
  />
  <h1>{{msg}}</h1>
</template>

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'About',
  data() {
    return {msg: 'Hello Vue 3.0 + Vite!'}
  },
  setup() {}
})
</script>

再批改 main.ts

import {createApp} from 'vue'
import {store, key} from './store'
import router from "./router";
import App from './App'
import './index.css'

const app = createApp(App)

app.use(store, key)
app.use(router)
app.mount('#app')

再拜访 http://localhost:3000/

和 http://localhost:3000/about 即可

5. 退出 Element Plus

5.1 装置 element-plus

全局装置

npm install element-plus --save

5.2 引入 Element Plus

你能够引入整个 Element Plus，或是依据须要仅引入局部组件。咱们先介绍如何引入残缺的 Element。

残缺引入

在 main.js 中写入以下内容：

import {createApp} from 'vue'
import ElementPlus from 'element-plus';
import router from "./router";
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
import './index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

以上代码便实现了 Element Plus 的引入。须要留神的是，款式文件须要独自引入。

按需引入

借助 babel-plugin-component，咱们能够只引入须要的组件，以达到减小我的项目体积的目标。

首先，装置 babel-plugin-component：

npm install babel-plugin-component -D

而后，将 .babelrc 批改为：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-plus",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只心愿引入局部组件，比方 Button 和 Select，那么须要在 main.js 中写入以下内容：

import {createApp} from 'vue'
import {store, key} from './store';
import router from "./router";
import {ElButton, ElSelect} from 'element-plus';
import App from './App.vue';
import './index.css'

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);

/* or
 * app.use(ElButton)
 * app.use(ElSelect)
 */

app.use(store, key)
app.use(router)
app.mount('#app')
app.mount('#app')

更具体的装置办法请看 疾速上手。

5.3 全局配置

在引入 Element Plus 时，能够传入一个全局配置对象。

该对象目前反对 size 与 zIndex 字段。size 用于扭转组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。依照引入 Element Plus 的形式，具体操作如下：

残缺引入 Element：

import {createApp} from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000});

按需引入 Element：

import {createApp} from 'vue'
import {ElButton} from 'element-plus';
import App from './App.vue';

const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);

依照以上设置，我的项目中所有领有 size 属性的组件的默认尺寸均为 ‘small’，弹框的初始 z-index 为 3000。

5.4 配置 vite.config.ts

其中 proxy 和 alias 是和 vue-cli 区别比拟大的中央。

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {return `element-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) => {return `element-plus/lib/${name}`;
          },
        }
      ]
    })
  ],

  /**
   * 在生产中服务时的根本公共门路。* @default '/'
   */
  base: './',
  /**
  * 与“根”相干的目录，构建输入将放在其中。如果目录存在，它将在构建之前被删除。* @default 'dist'
  */
  // outDir: 'dist',
  server: {
    // hostname: '0.0.0.0',
    host: "localhost",
    port: 3001,
    // // 是否主动在浏览器关上
    // open: true,
    // // 是否开启 https
    // https: false,
    // // 服务端渲染
    // ssr: false,
    proxy: {
      '/api': {
        target: 'http://localhost:3333/',
        changeOrigin: true,
        ws: true,
        rewrite: (pathStr) => pathStr.replace('/api', '')
      },
    },
  },
  resolve: {
    // 导入文件夹别名
    alias: {'@': path.resolve(__dirname, './src'),
      views: path.resolve(__dirname, './src/views'),
      components: path.resolve(__dirname, './src/components'),
      utils: path.resolve(__dirname, './src/utils'),
      less: path.resolve(__dirname, "./src/less"),
      assets: path.resolve(__dirname, "./src/assets"),
      com: path.resolve(__dirname, "./src/components"),
      store: path.resolve(__dirname, "./src/store"),
      mixins: path.resolve(__dirname, "./src/mixins")
    },
  }
})

踩到坑

在 npm run dev 打包时不报错，然而在 npm run build 时却报错了，build 的时候会把 node_modules 外面的文件也编译，所以挺多 element-plus 的类型文件报错了。

把 tsconfig.json 外面的 include 和 exclude 批改一下就不会了，配置如下

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    // 疏忽 this 的类型查看, Raise error on this expressions with an implied any type.
    "noImplicitThis": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"]
  },
  "include": ["/src/**/*.ts", "/src/**/*.d.ts", "/src/**/*.tsx", "/src/**/*.vue"],
  // ts 排除的文件
  "exclude": ["node_modules"]
}

Vue3 + vite2 打包进去的文件和原来 vue2 版的差异也挺大的，由原来 2.5M 间接变成了 1.8M，amazing！

最初

我的项目代码大多都是 2 年前的，还有很多能够优化的中央，这次重构的过程没对原来的款式和代码做什么改变，没那么多工夫，加上我懒 😂

这次就降级了次要框架与相应的 ui 库，过了一遍 Vue3 中的 API，发现很多 Vue3 中新的 API 都用不上，次要是要纯熟一下 Vue3 和 Vite2 我的项目搭建，这假期也算有所播种。

具体我的项目源码请看：

https://github.com/biaochenxuying/blog-vue-typescript

至此，一个基于 Vue3 全家桶 + Vite2 + TypeScript + Element Plus 的开发环境曾经搭建结束，当初就能够编写代码了，各个组件的应用办法请参阅它们各自的文档。

不得不说 Vue3 + Element Plus + Vite + TypeScript 是真的香！

举荐一个 Vue3 相干的材料汇总：Vue3 的学习教程汇总、源码解释我的项目、反对的 UI 组件库、优质实战我的项目，置信你会挖到矿哦！

参考文章：vue3 + vite + typescript + eslint + jest 我的项目配置实际

举荐浏览

  • TypeScript 中晋升幸福感的 10 个高级技巧

欢送关注公众号：“全栈修炼 ”，回复“ 电子书”即能够取得上面 300 本技术精髓书籍哦，猫哥 wx：CB834301747。

退出移动版