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

目录

  • 一、安装vue-cli@4.5.x

  • 二、创建项目

  • 三、项目配置

  • 四、IDE配置

  • 五、vue.config.js配置

  • 六、篇章小结

一、安装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.orgnpm install -g mirror-config-china --registry=http://registry.npm.taobao.org

二、创建项目

好了，接下来我们可以开始创建项目了：

vue create multi-tabs

首先你会看见这样的界面：

这里我们选择最下面的Manually select features，然后回车

这里选择TypeScript，上下键切换高亮行，空格选中，回车确认。这里的Router和Vuex不用选，后面我们可以自己安装

这里就是选择我们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，然后自己起个名，下次就可以直接用了

然后回车，项目就会开始自动构建了，当显示这样的界面的时候，就是构建成功了：

三、项目配置

为了有更好的开发体验，以及更规范的代码，我们在项目中引用了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篇 

来源：https://www.icode9.com/content-4-901351.html

赞 (0)

相关推荐