Vue3.2电商项目练习

初始化

项目包

Vite+Vue3.2+vue-router+pinia+axios+Typescript+Arco-Design+sass

安装

🥬Vite初始化Vue-ts

pnpm create vite electronicCommerce

选择vue=>vue-ts

cd electronicCommerce
pnpm i

🥬安装依赖包

pnpm i vue-router@4
pnpm i axios
pnpm i pinia
pnpm i @arco-design/web-vue
pnpm i --save-dev sass

项目目录

初始配置

@别名配置

tsconfig.json

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
    // ...
  }
}

vite.config.ts

import { resolve } from 'path'

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  }
  // ...
})

参考链接:

《vite 添加别名 (白开奶)》

引入Arco-Design

main.ts

import ArcoVue from '@arco-design/web-vue'               // 组件库
import ArcoVueIcon from '@arco-design/web-vue/es/icon'   // icon
import '@arco-design/web-vue/dist/arco.css'              // 全局css

app.use(ArcoVue).use(ArcoVueIcon)

路由表