# vue3+vite+ts+pinia 學習筆記

## 1、創(chuàng)建項目: npm init vite@latest

? ? 選擇: vue、ts

## 2、進入項目目錄后：npm install 安裝

## 3、運行項目: npm run dev

## 4、安裝常用插件：

? ? 1、安裝 npm install vue-router@latest 配置:在src目錄下新建router目錄，創(chuàng)建index.ts文件代碼如下: ? ? ?

```javascript 創(chuàng)建路由文件? ? ? ?

 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目錄，創(chuàng)建counter.ts文件代碼如下：

```javascript 創(chuàng)建倉庫文件? ?

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圖標顯示? ?

 <script lang="ts" setup>

? ? ? ? import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'

? ? </script>

``` ?

? ? 3、npm i axios -S 直接安裝即可使用

? ? 5、npm i --save-dev @types/qs 直接安裝即可使用

? ? 6、npm i echarts -S

```javascript echarts按需導入使用教程

? ? 1、在src目錄下創(chuàng)建一個文件夾，命名為插件：plugins目錄，創(chuàng)建一個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 直接安裝即可使用文章來源地址http://www.zghlxwxcb.cn/news/detail-494083.html

到了這里，關于vue3+vite+ts+elementplus創(chuàng)建項目的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！