vite

This time, I used vite instead of the packaging tool I used before. Vite is a tool intended to replace WebPack. Take advantage of es6’s import feature that sends requests to load files, intercept those requests, and do some pre-compilation to save webPack’s tedious packaging time. The biggest difference with VUE-CLI3 is that when creating a project, it can be done very quickly, and then install and run the dependencies of the project after completion.

Install vite

npm i -g create-vite-app
Copy the code

Create VUE3 with Vite

create-vite-app project
Copy the code

Install dependencies to run projects

yarn add
yarn run dev
Copy the code

element-plus

Enter theelement-plusOn the official website, follow the steps to install Element-Plus.

If you need to display dates in Chinese, you need to import Chinese configuration.Referenced in main.js:

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'
createApp(App).use(ElementPlus, { locale }).mount('#app');
Copy the code

Since you are using Vite, you also need to configure it in vite.config.js:

import path from 'path';
export default {
    alias: {
        "@": path.resolve(__dirname, 'src'),},optimizeDeps: {
        include: ["element-plus/lib/locale/lang/zh-cn",}}Copy the code

Alias is the configured path alias.

vue3

Using Element-Plus in VUe3 is similar to element2, where you copy the components you need directly and define the business data and logic you need in SCsript.

  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
    <el-table-column prop="name" label="Name" width="180"> </el-table-column>
    <el-table-column prop="address" label="Address"> </el-table-column>
    <el-table-column label="Operation" width="100">
      <template #default="scope">
        <el-button
          @click="removeClick(scope.$index, scope.row)"
          type="text"
          size="small"
          >delete</el-button>
      </template>
    </el-table-column>
  </el-table>
Copy the code

In SETUP, define the required data and methods:

setup() {
	let state = reactive({
      // Reactive supports array and object changes
      tableData: [{id: "1".date: "2016-05-02".name: "Wang Xiaohu".address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai,},... ] });let removeClick = (index, row) = > {
      state.tableData = state.tableData.filter((item) = >row.id ! == item.id); };return {
      ...toRefs(state),
      removeClick
      };
}
Copy the code

Importing the vUE dependencies of the response and using toRefs to deconstruct the data in state allows you to use variables in state directly in the template. However, this is similar to VUe2 in that the data is defined before the business logic is implemented. In addition to the above writing, you can also package the data and logic into a method to truly achieve data and business integration.

export default {
  setup() {
    let { state, removeClick } = useRemove();
    return{... toRefs(state), removeClick, }; }};function useRemove() {
  let state = reactive({
    // Reactive supports array and object changes
    tableData: [{id: "1".date: "2016-05-02".name: "Wang Xiaohu".address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai,},... ] });let removeClick = (index, row) = > {
    state.tableData = state.tableData.filter((item) = >row.id ! == item.id); };return { state, removeClick };
}
Copy the code

Not only can you write to the same file, but you can also write methods to a file and reference the required methods using an import or export method.