# Vue3+TS

**Repository Path**: zhangBo11/vue3--ts

## Basic Information

- **Project Name**: Vue3+TS
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-21
- **Last Updated**: 2022-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, vite, TypeScript

## README

# Vue 3 + Vite + vue-router + vuex + elementPlus
```
npm init vite@latest vue3-admin -- --template vue  //vite创建vue3.0项目

//分别安装了
npm install vue-router@next --save
npm install vuex@next --save
npm install axios --save
npm install qs --save
npm install eslint eslint-plugin-vue --save-dev

//安装ts，并初始化
npm install typescript  --save
npx tsc --init

npm install element-plus  --save
```

- 使用sass，直接下载npm i sass --save 就可使用，不用其他配置

##### sass变量未引入却能使用问题
```
/styels/index.scss

// 在此处先引入sass变量文件，在后面的文件中就能不用引入，直接使用sass变量了，但是并没有暴露到全局
// 在其他组件内使用还会报错
@import './variables.scss';
@import './test.scss';
@import './sidebar.scss';

在main.ts中引入index.scss
```
```
/styles/sidebar.scss 中不用引入variables.scss，直接使用即可
#app {
  .sidebar-container {
    width: $sideBarWidth !important;
    height: 100%;
    background-color: pink;
  }
}

```
##### svg组件不显示问题，组件中标签 use使用方式不对
- https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md vite中配置插件
```
<use></use> // false 
<use /> // true
```
##### svg 优化
```
/src/icons/svgo.yml 是svg 压缩处理优化配置文件
{
  ...
  "scripts": {
    ...,
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },
}
npm run svgo压缩优化
```
##### vue2和vue3项目vscode不兼容，配置工作区试试 https://www.cnblogs.com/jiading/articles/13477970.html

##### npm install path-to-regexp@6.2.0 --save 解决面包屑导航是动态路由的情况

##### 项目中使用useStore为引用vuex中的
```
    import { useStore } from '@/store' 
    // 使用我们自定义的useStore 具备类型提示
    // store.state.app.sidebar 对于getters里的属性没有类型提示
```
##### elementplus 中icon使用
```
//目前版本2.0.2需要下载 npm install @element-plus/icons-vue
// 在使用页面中引入
import { Close } from '@element-plus/icons-vue'

注册局部组件
components: {
  Close
}

ElIcon在element.ts中注册为全局组件
```