6、初步理解Vue目录结构并编写初始化界面

一、安装elementPlus

  npm install element-plus --save

以后所有资源安装后都可以在node_modules 下查找得到

二、项目中引入

        这里直接使用全局引入：在main.js中 导入elementPlus，

        换成ts后，import App from './App.vue' 一直爆红，在vite.env.d.ts 中添加一段：

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

三、重写App.vue文件

        在编写前，再次添加一些拓展，详细可参考其他博客：VS code上创建Vue项目详细化教程1-配置VScode与Vue_vscode vue-CSDN博客

删除component目录,在main.js中引入elementPlus     

  

        这里讲解一下，

vue项目启动的是根目录下面的index.html

而body中 div一个id 为app，引入了一个脚本叫main.ts ,

打开main.js，挂载一个叫App.vue文件，所以启动后从index.html跳到了App.vue,也就是打开页面的首页

上篇还用到一个叫vite.config.ts的文件，那个就是相当于后端的application.yml一样的一个全局配置文件