【vue3+typescript】Vue3+TS电商后台体系项目实战

项目创立

首要履行vue create vue3_ts_demo来创立一个名为 vue3_ts_demo 的项目，然后：

1、挑选Manually select freatures来手动挑选

【vue3+ts后台管理】项目搭建

2、按空格选中 Babel、Typescript、css预处理器、Linter/Formatter，然后按回车下一步

【vue3+ts后台管理】项目搭建
3、选中 vue 的版本为3

【vue3+ts后台管理】项目搭建

4、是否运用 class 风格的组件语法，我们挑选 N

5、是否运用 Babel 和 TypeScript（现代形式、自动检测多边形填充、trans所需（JSX） 输入Y回车

6、是否运用 history 路由形式，选中 Y

7、挑选 CSS 预处理器，选中第一个即可（Sass/SCSS）

8、挑选语法检测标准，选中第一个即可（Basic）

9、挑选保存时查看 / 提交时查看， 一般开发时挑选第一个保存时查看（Lint on save）

10、挑选装备信息存放方位，独自存放或许并入package.json，我们挑选 （package.json）

11、是否保存为预设，这样下次创立项目就不用从头挑选，我们挑选 N

完好截图如下：

【vue3+ts后台管理】项目搭建
等候项目创立完结，履行以下代码来运转项目

cd vue3_ts_demo
npm run serve

【vue3+ts后台管理】项目搭建

引进element-plus

Element-plus国内站点-装置

我们运用 Webstorm 翻开刚才的项目，在终端履行npm install element-plus --save来装置 Element-plus

完好引进

然后按照快速开端章节，在 main.ts 中完好引进：

【vue3+ts后台管理】项目搭建
在指南中，我们可以仿制按钮的代码，放入 App.vue 来测验是否引进成功

【vue3+ts后台管理】项目搭建
运转程序就可以看到我们加入的按钮了

【vue3+ts后台管理】项目搭建

按需引进

按需引进

1、按需引进的话，首要装置两个插件：npm install -D unplugin-vue-components unplugin-auto-import

2、然后官网提示的代码刺进到你的 Vite 或 Webpack 的装备文件中，我们运用的 webpack，所以仿制官网代码放入 webpack.config.js 中（没有的话创立一个），或许我们放在 vue.config.js 中即可（需求稍作修正哦，添加webpack的装备）

这儿我挑选放到 vue.config.js

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack:{
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ]
  }
})

从头运转和完好引进效果是相同的