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

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

项目创建

首先执行vue create vue3_ts_demo来创建一个名为 vue3_ts_demo 的项目,然后:

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

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

3、选中 vue 的版本为3

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

完整截图如下: 等待项目创建完成,执行以下代码来运行项目

javascript 复制代码
cd vue3_ts_demo
npm run serve

引入element-plus

Element-plus国内站点-安装

我们使用 Webstorm 打开刚才的项目,在终端执行npm install element-plus --save来安装 Element-plus

完整引入

然后按照快速开始章节,在 main.ts 中完整引入: 指南中,我们可以复制按钮的代码,放入 App.vue 来测试是否引入成功

运行程序就可以看到我们加入的按钮了

按需引入

按需引入

1、按需引入的话,首先安装两个插件:npm install -D unplugin-vue-components unplugin-auto-import

2、然后官网提示的代码插入到你的 Vite 或 Webpack 的配置文件中,我们使用的 webpack,所以复制官网代码放入 webpack.config.js 中(没有的话创建一个),或者我们放在 vue.config.js 中即可(需要稍作修改哦,增加webpack的配置)

这里我选择放到 vue.config.js

javascript 复制代码
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()],
      }),
    ]
  }
})

重新运行和完整引入效果是一样的

相关推荐
sunbyte21 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店2 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
别跟老夫聊头发2 小时前
vue缩放/放大时,实时更新/变换显示高度
vue.js
拾光拾趣录2 小时前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权2 小时前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598242 小时前
vue3源码解析:调度器
前端·vue.js
梦想CAD控件2 小时前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
bitbitDown3 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
markyankee1013 小时前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js