一、项目结构介绍

1.项目目录

项目创建好后，我们用vscode打开，能看见一下几个列表。
vue列表

node_modules：用来存放用包管理工具下载安装的包的文件夹。（检出的时候不要上传这个）
public：公共资源 src：源文件
.browserslistrc：项目配置工具
.gitignore：git配置
babel.config.js：转码器
package.json：项目依赖文件
README.md：说明文档

2.public公共资源文件

最初我们创建的项目里面就包含了两个东西。
public

第一个是我们网页的标题前面的图标，第二个是首页的html文件，他跟我们平时开发的html是一样的。
indexhtml
这里可以看见，我们只有一个< d i v >标签，里面有一个app，但是实际显示页面就有很多东西，就也是vue一个特性，后期所有内容我们都会动态追加到app里面。

3.Src源文件

打开src目录，可以看见它里面有几个不同的文件夹：
src

assets：主题、字体等静态资源
components：全局公用组件，放置通用模块组件
router：路由，放置路由设置文件，指定路由对应的组件
store：全局store管理，放置 vuex 需要的状态关联文件
views：开发所有界面
App.vue：根组件
main.js：整个项目的入口文件

4.package.js文件

当我们打开package.js文件时，可以看见如下图所示的项目信息：
package.json

name:项目名字
vue：版本：3.6.10
veison：项目具体版本
serve：项目启动命令
build：打包命令
1.2.2：大版本.次要版本.小版本
“^2.6.10”：不能低于3.6.5，不能修改大版本号
”~4.5.0“：不能低于4.5.0，不能修改版本号和次要版本号

在package.json文件中，devDependencies和dependencies的区别：

dependencies：依赖，这些安装包都是程序所依赖的包，需要发布到实际生产环境的。
-dev/-D：放在开发模式下，要是没有写，安装依赖就不会出现在devdependencies（开发环境下的依赖）。
–save/–S：生产模式（最终打包环境（html+css+js）），依赖安装到dependencies（发布到生产环境）。要是都没写，就不会出现在dev/-dependencies

5.配置文件

如果需要添加特定文件来进行配置信息，那我们在目录下手动添加vue.package.js文件。
配置文件
里面可以设定端口地址。（端口地址不能重复）
如图所示：
配置端口
具体代码如下：

module.exports = {
    
    
  devServer: {
    
    
    port: 8088, // 端口
    host: 'localhost', // 默认在本地
    open: true // 配置浏览器自动访问
  }
}

二、引入Element ui

1.通过npm的方式安装

npm安装

2.在main.js文件里面写入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
    
    
  el: '#app',
  render: h => h(App)
});

PS：样式文件需要单独引入
最终变成这样：
main.js
其中，我们可以看见import xx from ’ ./'，这一共有三个：

…/：同级
./：上一级
@/：根目录上

3.引入组件

我们试着引入按钮组件。

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

出现以下效果，说明element-UI引入成功！

[VUE]项目结构介绍+引入Element UI