Vue3.2电商项目练习

本文最后更新于:2022年4月3日 中午

初始化

项目包

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'),
},
}
// ...
})

引入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)

路由表


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