Vue3.2电商项目练习

本文最后更新于：2024年4月25日 上午

初始化

项目包

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

安装

🥬Vite初始化Vue-ts

1
pnpm create vite electronicCommerce

选择vue=>vue-ts

1
2
cd electronicCommerce
pnpm i

🥬安装依赖包

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

项目目录

初始配置

@别名配置

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
    // ...
  }
}

vite.config.ts

1
2
3
4
5
6
7
8
9
10
11
import { resolve } from 'path'

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

参考链接:

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

引入Arco-Design

main.ts

1
2
3
4
5
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)

路由表

Vue > Vue3.x > 实践
#Vue #实践
Vue3.2电商项目练习
https://qingshaner.com/Vue3电商项目/
作者
清山
发布于
2022年3月12日
许可协议