# 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 ディレクトリの下に新しいルーター ディレクトリを作成し、次のコードを含む 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 ディレクトリの下に新しい Store ディレクトリを作成し、次のコードを含む 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要素プラスアイコン表示
<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 ディレクトリにフォルダーを作成し、plug-in: 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 はインストール後に直接使用できます