0


搭建vue3项目+按需引入element-ui框架组件

场景:使用vue create脚手架快速搭建vue的项目
前提:需要安装node.js和cnpm以及yarn
并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索

1.使用dos命令安装vue-cli脚手架

//这个是从镜像源下载
cnpm install -g @vue/cli 

查看安装的版本(显示版本号说明安装成功)

vue --version

在这里插入图片描述

2.使用vue create命令搭建vue项目

1.cmd窗口跳到需要新建项目的文件夹下,使用vue create

//vuetest是我的项目名
vue create vue-element-plus

2.我这里选择第三个Manually select features自定义选项操作并回车(至于第一个和第二个选项可以快速搭建带eslint和babel的项目)
在这里插入图片描述
3.选择配置项
我这里选择了Babel、 TypeScript、Router、Vuex、Linter/Formatter三个选项(通过

键盘上下键

移动,使用

空格键

勾选),然后回车
在这里插入图片描述

>() Babel                              //  代码编译() TypeScript                         //  ts() Progressive Web App (PWA) Support  //  支持渐进式网页应用程序() Router                             //  vue路由() Vuex                               //  状态管理模式() CSS Pre-processors                 //  css预处理() Linter / Formatter                 //  代码风格、格式校验() Unit Testing                       //  单元测试() E2E Testing                        //  端对端测试

4.选择vue的版本
我这里选择第一个3.X,然后回车
在这里插入图片描述
5.选择class风格的component
这里输入N
在这里插入图片描述
对比选y和N的区别,截图如下
选N:
在这里插入图片描述

选Y:
在这里插入图片描述
6.选择 Use Babel alongside TypeScript
这里输入Y
在这里插入图片描述
7.选择router的模式
vue-router分为两种模式

hash
history

**hash:**
特征:
1.hash会在浏览器路径里带#号,比如http://locahost:8080/#/index
2.hash在浏览器改变路径触发页面跳转,即前进后退,但不会重新加载页面。
3.hash传参是基于url,如果要传递复杂的参数会有体积的限制

**history**
特征:
1.可以在url放参数,而且也可以将数据存放在一个特定的对象中,其利用HTML5 History inteface中新增的pushState()和replaceState()方法(限制:history只支持IE8以上)

2.需要后台配置支持,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.test.com/user/id 如果后端缺少对 /user/id 的路由处理,将返回 404 错误。

我这里使用router路由的history模式,输入Y,然后回车(如果使用hash,则输入n)
在这里插入图片描述
8.代码语法错误检查
我这里选择ESLint + Standard config,这个是标准的,然后回车

在这里插入图片描述
9.选择检查代码语法的时机
我这里选择第一个Lint on save,然后回车
在这里插入图片描述
10.第三方配置文件存在的方式
我这里选择第一个In dedicated config files,然后回车
在这里插入图片描述
11.是否保存本次配置为预设项目模板
我这里选择N(也可以选择Y,这样下次可以直接使用该配置方案快速搭建项目),然后回车,则项目搭建成功
在这里插入图片描述
12.搭建成功的示例
在这里插入图片描述
13.打开项目安装依赖
在终端输入如下代码,安装依赖包

yarn install

在这里插入图片描述
14.启动项目
在终端输入如下代码,然后回车启动项目

yarn serve

在这里插入图片描述放在浏览器预览

在这里插入图片描述
15.安装elementUI框架
在终端控制台输入如下安装

yarn add element-plus

在这里插入图片描述
16.按需引入elementUI的组件
在src\core文件夹下新建element.ts文件,代码如下

import {
    ElConfigProvider,
  ElAlert,
  ElAside,
  ElAutocomplete,// ElAvatar,// ElBacktop,// ElBadge,// ElBreadcrumb,// ElBreadcrumbItem,// ElButtonGroup,// ElCalendar,
  ElCard,// ElCarousel,// ElCarouselItem,// ElCascader,// ElCascaderPanel,
  ElCheckbox,
  ElCheckboxButton,
  ElCheckboxGroup,// ElCollapse,// ElCollapseItem,// ElCollapseTransition,// ElColorPicker,
  ElContainer,// ElDatePicker,
  ElDialog,
  ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,// ElFooter,
  ElForm,
  ElFormItem,
  ElHeader,
  ElIcon,
  ElInputNumber,
  ElImage,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElOption,
  ElOptionGroup,// ElPageHeader,
  ElPagination,// ElPopconfirm,
  ElPopover,// ElPopper,// ElProgress,
  ElRadio,
  ElRadioButton,
  ElRadioGroup,// ElRate,
  ElCol,
  ElRow,// ElScrollbar,
  ElLink,// ElSlider,// ElStep,// ElSteps,
  ElSubMenu,
  ElSwitch,
  ElTabPane,
  ElTabs,
  ElTable,
  ElTableColumn,
  ElTag,// ElTimePicker,// ElTimeSelect,// ElTimeline,// ElTimelineItem,
  ElTooltip,
  ElTransfer,
  ElTree,
  ElUpload,// ElInfiniteScroll,// ElLoading,// ElMessage,// ElMessageBox,// ElNotification,
  ElColorPicker,
  ElDatePicker,
  ElDescriptions,
  ElDescriptionsItem,
  ElEmpty,} from 'element-plus'
const components =[
    ElConfigProvider,
    ElRadio,
    ElRadioButton,
    ElRadioGroup,
    ElCheckbox,
    ElCheckboxButton,
    ElCheckboxGroup,
    ElLink,
    ElCard,
    ElForm,
    ElFormItem,
    ElHeader,
    ElIcon,
    ElInputNumber,
    ElAside,
    ElContainer,
    ElMain,
    ElMenu,
    ElMenuItem,
    ElMenuItemGroup,
    ElSubMenu,
    ElDropdown,
    ElDropdownItem,
    ElDropdownMenu,
    ElTabPane,
    ElTabs,
    ElTable,
    ElTableColumn,
    ElPagination,
    ElTag,
    ElDialog,
    ElTree,
    ElOption,
    ElOptionGroup,
    ElCol,
    ElRow,
    ElColorPicker,
    ElDatePicker,
    ElSwitch,
    ElPopover,
    ElImage,
    ElDescriptions,
    ElDescriptionsItem,
    ElDivider,
    ElDrawer,
    ElTooltip,
    ElTransfer,
    ElUpload,
    ElAlert,
    ElEmpty,
    ElAutocomplete,],
  options ={ size: 'small',zIndex:3000}//  eslint-disable-next-lineconst install =functionins(app: any):void{// if (install.installed) { return }for(let i =0; i < components.length; i++){
    app.component(components[i].name, components[i])}
  app.config.globalProperties.$ELEMENT = options
}const API ={
  install,}
export default Object.assign(API, components)

在main.ts文件代码添加如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from '@/core/element'
import 'element-plus/theme-chalk/index.css'

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

17.使用组件预览
在App.vue文件,代码如下

<template><ElConfigProvider :locale="locale"><!--<nav><router-link to="/">Home</router-link>|<router-link to="/about">About</router-link></nav><router-view />--><el-table :data="list"border style="width: 66%"class="tableel12"><el-table-column prop="tradeId" label="序号" width="180"/><el-table-column prop="stockHolderId" label="股民id" width="180"/><el-table-column prop="bankCardId" label="卡号"/><el-table-column prop="addedMoney" label="交易金额"/><el-table-column prop="state" label="状态"/><el-table-column prop="type" label="操作股票方式"/><el-table-column label="重传"><template #default="scope"><el-button type="primary" @click="update2(scope.row.tradeId, scope.row.state)">重传</el-button><!--<el-button link type="primary" size="small">Edit</el-button>--></template></el-table-column></el-table></ElConfigProvider></template><script >
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import {ref} from 'vue'
export default{setup(){const locale=ref(zhLocale)return{
       locale,}},}</script><style>#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;}

nav {
  padding: 30px;}nav a {
  font-weight: bold;
  color: #2c3e50;}

nav a.router-link-exact-active {
  color: #42b983;}</style>

效果图如下:
在这里插入图片描述

注意点:

1.我的npm版本是8.5.0 ,node版本是16.14.2 , yarn版本是1.22.18,
vue-cli版本是5.0.8,cnpm版本是8.2.0
在这里插入图片描述
2.elementUI官网:https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5

3.代码提交到gitee仓库:https://gitee.com/henrryhu/vue-element-plus

标签: ui vue.js javascript

本文转载自: https://blog.csdn.net/weixin_43861689/article/details/130063595
版权归原作者 鱼干~ 所有, 如有侵权,请联系我们删除。

“搭建vue3项目+按需引入element-ui框架组件”的评论:

还没有评论