vue3 プロジェクトを構築 + オンデマンドで element-ui フレームワーク コンポーネントを導入

シナリオ: vue create Scaffolding を使用して、vue プロジェクトをすばやく構築する
前提条件: Node.js、cnpm、yarn をインストールする必要があり
、cnpm を Taobao ミラーとして設定する必要がある インターネット上には、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. ここで、3 番目の「機能の手動選択」カスタム オプション操作を選択し、Enter キーを押します(最初と 2 番目のオプションについては、eslint と babel を使用してプロジェクトをすばやく構築できます)。 3.ここで

構成アイテムを選択します
。Babel、TypeScript、Router を選択します。 、Vuex、Linter/Formatter の 3 つのオプション (键盘上下键移動、空格键チェックを使用) を選択し、Enter キーを押します。

>( ) 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 を選択し、Enter キーを押します。

5. クラス スタイルのコンポーネントを選択し
、ここに N を入力して

、y と N の違いを比較します。スクリーンショットは次のとおりです
。 N:

Y を選択します:

6. TypeScript と並行して Babel を使用するを選択し、
ここに Y を入力します

。 7. ルーター モードを選択します。
vue-router は 2 つのモードに分かれています。

ハッシュ
履歴

**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 错误。

ここではルータ ルーティングの履歴モードを使用し、Y を入力して Enter を押します (ハッシュを使用する場合は、n を入力します)。 8.

コード構文エラーのチェックここでESLint + Standard config
を選択します。これは標準です。Enter を押します。

9. コード構文をチェックする時間を選択します。
ここでは、最初のLint on save を選択し、Enter キーを押します。

10. サードパーティの構成ファイルの存在方法。
ここでは、最初のIn dedicated config files を選択し、Enter キーを押します。 11.

今回保存するかどうか プリセット プロジェクト テンプレートとして構成
ここでは N を選択します (Y を選択すると、次回この構成スキームを直接使用してプロジェクトをすばやくビルドできます)、Enter キーを押してプロジェクトを保存します。ビルドが成功しました。

12. ビルドが成功した例

13. プロジェクトのインストールの依存関係を開きます。
ターミナルに次のコードを入力して、依存関係パッケージをインストールします。

yarn install

14. プロジェクトの開始
ターミナルに次のコードを入力し、Enter キーを押してプロジェクトを開始します。

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-line
const install = function ins(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 公式 Web サイト: 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