第一章——vue3.0+ts+element-plus多页签应用模板:项目搭建篇

目录

一、安装vue-cli@4.5.x

工欲善其事,必先利其器,我们需要安装vue-cli来创建项目(别问为什么,问就是简单、便捷、高效)。但是,在安装之前,首先要保证你的电脑里有12以上的node.js,不然你直接运行npm是会报错的。至于安装node的方案,请自行网上搜索。

接下来,我们打开电脑上的终端软件(windows用powershell或者cmd),输入以下代码并回车:

npm install -g @vue/cli

如果觉得下载的时候网速太慢,可以切换一下淘宝源(分两次执行):

npm config set registry https://registry.npm.taobao.org
npm install -g mirror-config-china --registry=http://registry.npm.taobao.org

二、创建项目

好了,接下来我们可以开始创建项目了:

vue create multi-tabs

首先你会看见这样的界面:
第一章——vue3.0+ts+element-plus多页签应用模板:项目搭建篇
这里我们选择最下面的Manually select features,然后回车
第一章——vue3.0+ts+element-plus多页签应用模板:项目搭建篇
这里选择TypeScript,上下键切换高亮行,空格选中,回车确认。这里的Router和Vuex不用选,后面我们可以自己安装
第一章——vue3.0+ts+element-plus多页签应用模板:项目搭建篇
这里就是选择我们vue的版本了,选择下面的3.x

接下来会有几个连续的问题:

  1. Use class-style component syntax? (y/N) 回答:n
  2. Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 回答:n
  3. Pick a linter / formatter config 回答:ESLint + Prettier | Lint on save
  4. Where do you prefer placing config for Babel, ESLint, etc.? 回答:In dedicated config files
  5. Save this as a preset for future projects? 回答:y,然后自己起个名,下次就可以直接用了

然后回车,项目就会开始自动构建了,当显示这样的界面的时候,就是构建成功了:
第一章——vue3.0+ts+element-plus多页签应用模板:项目搭建篇

三、项目配置

为了有更好的开发体验,以及更规范的代码,我们在项目中引用了ESLint + Preitter,所以,我们现在就要来配置一下这两个插件:

打开根目录下的.eslintrc.js,用下面的代码覆盖:

/*** .eslintrc.js ***/
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    quotes: ['error', 'single'],
    'comma-dangle': ['error', 'never'],
    'prettier/prettier': [
      'error',
      {
        vueIndentScriptAndStyle: false,
        endOfLine: 'auto'
      }
    ],
    'no-undef': 'off',
    'space-before-function-paren': 'off',
    'no-use-before-define': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^h$',
        varsIgnorePattern: '^h$'
      }
    ],
    '@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',
    '@typescript-eslint/no-use-before-define': 'off',
    '@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$'
      }
    ],
    'vue/require-default-prop': 'off',
    'vue/custom-event-name-casing': 'off',
    'vue/comment-directive': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/html-self-closing': 'off',
    'vue/max-attributes-per-line': 'off'
  }
}

在项目根目录创建文件:.prettierrc,并输入以下内容

{
  "eslintIntegration": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "vueIndentScriptAndStyle": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "bracketSpacing": true,
  "trailingComma": "none",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "insertPragma": false,
  "requirePragma": false,
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "strict",
  "endOfLine": "auto"
}

接着打开根目录下的tsconfig.json,用下面的代码覆盖:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
	"allowJs": true,
    "sourceMap": false,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ],
      "tslib" : ["path/to/node_modules/tslib/tslib.d.ts"]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

然后安装tslib:

npm i tslib --save-dev

这样,我们的项目就配置好了

四、IDE配置

我们选用的IDE是vscode(真的很好用)

给你的vscode安装以下插件:vetur, eslint, prettier,之后就可以进行愉快的开发了

五、vue.config.js配置

在根目录下新建文件夹config,然后在config文件夹下创建文件dev.config.js, prod.config.js,然后分别输入以下代码:

/**
 * dev.config.js
 * 开发环境配置
 */
const CompressionPlugin = require('compression-webpack-plugin')
const options = {
  // 是否开启eslint保存检测,有效值:ture | false | 'error'
  lintOnSave: true,
  // 配置webpack
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [
      // 配置gzip
      new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        deleteOriginalAssets: false,
        minRatio: 0.8
      })
    ]
  }
}

export default options
/**
 * prod.config.js
 * 生产环境配置
 */
const CompressionPlugin = require('compression-webpack-plugin')
const options = {
  // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
  assetsDir: 'static',
  // 配置webpack
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [
      // 配置gzip
      new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        deleteOriginalAssets: false,
        minRatio: 0.8
      })
    ]
  }
}

export default options

在根目录下新建文件vue.config.js,并输入以下代码:

/*** vue.config.js ***/
import DEV_CONFIG from './config/dev.config'
import PROD_CONFIG from './config/prod.config'

const IS_DEV = process.env.NODE_ENV === 'development'

module.exports = IS_DEV ? DEV_CONFIG : PROD_CONFIG

安装compression-webpack-plugin@1.1.12(千万不要安装最新版,安装指定的1.1.12版):

npm i compression-webpack-plugin@1.1.12 --save-dev

六、篇章小结

文章详细描述了一个vue3+ts的项目,从零开始的搭建过程,希望不了解vue3并想学习的程序员朋友们能够喜欢,并有所收益。

下一篇预告:第二章——vue3.0+ts+element-plus多页签应用模板:安装vue-router与vuex篇

上一篇:SQL server 索引


下一篇:C#线程启动、暂停、恢复、停止怎么实现