vue3+vite+ts+elementplus创建项目

ubuntu 安装16以上的需要先执行：

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -

 安装：apt install nodejs

错误1：./App.vue下面有红色下划线时在vite-env.d.ts中添加下面代码：

declare module '*.vue'{
    import type {DefineComponent} from 'vue'
    const component:DefineComponent<{},{},any>
    export default component
}

设置vue3.2局域网可访问配置：

1、找到项目路径下的package.json目录下找到script对象下面添加一下代码：

       "serve": "vite --host 0.0.0.0"

2、启动项目命令不在是dev而是：npm run serve

 配置@路径报错问题：

1、安装path路径：npm install @types/node

2、第二部：在vite.config.ts中添加以下代码配置：

       import { resolve } from 'path';

        export default defineConfig({

                plugins:[vue()],

                resolve:{

                        alias:{

                                '@':resolve(__dirname,'./src')

                        }

                }

        })

例如：

3、第三部：在tsconfig.json中找到"compilerOptions"中添加以下代码：

        "baseUrl":".",

        "paths":{

                "@/*":["src/*"]

        }

        例如：

4、第四部测试是否成功：在App.vue页面设置

import HelloWorld from '@/components/HelloWorld.vue';

<img src="@/assets/1.jpg" class="logo vue" alt="Vue logo" />

测试看看是否成功

# 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图标显示   

 <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目录下创建一个文件夹，命名为插件：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 直接安装即可使用