vue3+vite+ts+elementplus创建项目
# vue3+vite+ts+pinia 学习笔记
## 1、创建项目: npm init vite@latest
选择: vue、ts
## 2、进入项目目录后：npm install 安装
## 3、运行项目: npm run dev
## 4、安装常用插件：
1、安装 npm install vue-router@latest 配置:在src目录下新建router目录，创建index.ts文件代码如下:
```javascript 创建路由文件
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/views/layout/index.vue'
import Login from '@/views/login/Login.vue'
import Home from '@/views/home/Home.vue'
// 懒加载
const Product = ()=>import('@/views/product/Index.vue')
const List = ()=>import('@/views/product/list/List.vue')
const Category = ()=>import('@/views/product/category/Category.vue')
const order = ()=>import('@/views/order/Index.vue')
const order_List = ()=>import('@/views/order/list/List.vue')
const order_Collect = ()=>import('@/views/order/collect/Collect.vue')
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path:'/',
name:'',
component:Layout,
children:[
{
path:'/',
name:'home',
component:Home
},
{
path:'/product',
name:'product',
component:Product,
children:[
{
path:'list',
name:'list',
component:List
},
{
path:'category',
name:'category',
component:Category
}
]
},
{
path:'/order',
name:'order',
component:order,
children:[
{
path:'order_list',
name:'order_List',
component:order_List
},
{
path:'order_collect',
name:'order_collect',
component:order_Collect
}
]
},
]
},{
path:'/login',
name:'login',
component:Login
}
]
})
export default router
```
```javascript 注册路由组件
注册路由组件：在main.ts文件中注册：
import router from './router'
app.use(router)```
2、安装 npm install pinia 配置:在src目录下新建stores目录，创建counter.ts文件代码如下：
```javascript 创建仓库文件
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
export const useUser = defineStore('user',()=>{
const user = ref({
name:'刘德华',
age:64
})
return {user}
})```
```javascript 注册路由组件
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)```
2、npm install element-plus --save
```javascript 完整导入 （推荐使用）
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)```
```javascript 按需导入 (需要安装插件:npm install -D unplugin-vue-components unplugin-auto-import) 在vite.config.ts中修改一下代码
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
```
```javascript element-plus图标显示
```
3、npm i axios -S 直接安装即可使用
5、npm i --save-dev @types/qs 直接安装即可使用
6、npm i echarts -S
```javascript echarts按需导入使用教程
1、在src目录下创建一个文件夹，命名为插件：plugins目录，创建一个echarts.ts文件复制一下内容至文件：
// 图表
import * as echarts from 'echarts/core';
import {BarChart,LineChart,PieChart} from 'echarts/charts';
import {TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import type {BarSeriesOption, LineSeriesOption} from 'echarts/charts';
import type {TitleComponentOption,TooltipComponentOption,GridComponentOption,DatasetComponentOption} from 'echarts/components';
import type { ComposeOption, } from 'echarts/core';
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
| BarSeriesOption
| LineSeriesOption
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| DatasetComponentOption
>;
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LineChart,
PieChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
export default echarts
2、调用页面代码实例：
import echarts from '@/plugins/echarts';
// let myEchart1 = echarts.init(document.getElementById("draw")) // 切换页面时不会显示，解决办法使用下面的
// 解决一个charts不渲染的问题，认为dom没有修改
let dsiab_com = document.getElementById("draw")
dsiab_com.removeAttribute("_echarts_instance_")
var myEchart1 = echarts.init(dsiab_com)
// 绘制图表
myEchart1.setOption({
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'line', // line折线图，bar柱状图,pie
data: [15, 210, 362, 103, 10, 20]
},
{
name: '金额',
type: 'bar', // line折线图，bar柱状图,pie
data: [5, 20, 36, 10, 10, 20]
}
]
});```
7、npm i sass sass-loader -D 直接安装即可使用