Vue3.0-创建Vue3.0项目

Vue3.0-创建Vue3.0项目

一、创建Vue工程

1、创建工程

通过指令：

Npm init vue@latest

选择no，最后输入项目名称

2、进入创建文件的项目目录

cd vue-demo

3、初始化项目

通过指令：

npm install

初始化项目，该过程需要等一会

4、启动项目

通过指令：

npm run dev

启动后，会出现url，浏览器中输入该url即可

二、安装工具

1、安装 Element Plus

element-plus是element插件的工具，安装后可以使用element-plus插件工具。
通过指令：

npm install element-plus --save

安装工具后，需要修改main.js，对element-plus进行引入

import { createApp } from 'vue'
// import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

2、安装axios

axios是vue3发送请求的插件，通过axios可以调用get/post请求
通过指令：

npm install axios

安装工具后，需要引用，可以在main.js全局引用，也可以哪里用到引哪里

import axios from 'axios'

三、目录结构

├── public/ # 静态资源目录
├── src/
│ ├── assets/ # 全局资源目录
│ │ ├── fonts/
│ │ └── images/
│ │
│ ├── components/ # 全局组件
│ │ └── UserSelectTable/
│ │ ├── style/
│ │ │ ├── _var.scss
│ │ │ └── index.scss
│ │ ├── UserSelectTable.vue
│ │ └── index.js
│ │
│ ├── layouts/ # 自定义布局目录，可以写一个 ProLayout 代替自定义布局
│ │ ├── Basic.vue
│ │ └── User.vue
│ │
│ ├── mocks/ # 本地模拟数据
│ │ ├── data/
│ │ ├── setup.mock.js
│ │ └── users.mock.js
│ │
│ ├── store/ # 状态管理
│ │ ├── plugins/
│ │ │ ├── persist.js
│ │ │ └── qiankun.js
│ │ ├── modules/ # 除非业务过于复杂，否者不推荐
│ │ │ ├── cart.js
│ │ │ └── products.js
│ │ ├── getters.js # 根级别的 getters
│ │ ├── actions.js # 根级别的 action
│ │ ├── mutations.js # 根级别的 mutation
│ │ └── index.js
│ │
│ ├── router/
│ │ ├── routes.js # 路由配置
│ │ └── index.js
│ │
│ ├── services/ # 全局数据请求
│ │
│ ├── views/ # 页面级组件
│ │ ├── Home/
│ │ │ ├── components/ # 页面级组件
│ │ │ ├── services/ # 页面级组数据请求
│ │ │ │ └── repo.js
│ │ │ └── Home.vue
│ │ │
│ │ └── About/
│ │ ├── components/
│ │ └── About.vue
│ │
│ ├── login.js # 登录页入口
│ └── main.js # 应用入口
│
├── .browserslistrc
├── .env
├── .editorconfig
├── .eslintrc.js
├── .prettierrc
├── babel.config.js
├── vue.config.js
├── LICENSE.md
├── jsconfig.json
└── package.json

1、public 静态资源目录

这里的内容不会被编译，直接复制到编译输出目录。

2、assets

全局资源目录，这里存放源码中使用到的静态资源，会和源码一起被编译。

3、components

项目通用的组件库，推荐目录形式：

components/
└── UserSelectTable/
├── style/ # 组件样式
│ ├── _var.scss
│ └── index.scss
├── UserSelectTable.vue
└── index.js # 组件出口

一个组件一个目录，方便后期迁移项目，独立成一套业务