Vue3.0-創(chuàng)建Vue3.0項(xiàng)目
一、創(chuàng)建Vue工程
1、創(chuàng)建工程
通過指令：
Npm init vue@latest
選擇no，最后輸入項(xiàng)目名稱
2、進(jìn)入創(chuàng)建文件的項(xiàng)目目錄
cd vue-demo
3、初始化項(xiàng)目
通過指令：
npm install
初始化項(xiàng)目，該過程需要等一會
4、啟動項(xiàng)目
通過指令：
npm run dev
啟動后，會出現(xiàn)url，瀏覽器中輸入該url即可
二、安裝工具
1、安裝 Element Plus
element-plus是element插件的工具，安裝后可以使用element-plus插件工具。
通過指令：
npm install element-plus --save
安裝工具后，需要修改main.js，對element-plus進(jìn)行引入
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發(fā)送請求的插件，通過axios可以調(diào)用get/post請求
通過指令：
npm install axios
安裝工具后，需要引用，可以在main.js全局引用，也可以哪里用到引哪里
import axios from 'axios'
三、目錄結(jié)構(gòu)
├── public/ # 靜態(tài)資源目錄
├── src/
│ ├── assets/ # 全局資源目錄
│ │ ├── fonts/
│ │ └── images/
│ │
│ ├── components/ # 全局組件
│ │ └── UserSelectTable/
│ │ ├── style/
│ │ │ ├── _var.scss
│ │ │ └── index.scss
│ │ ├── UserSelectTable.vue
│ │ └── index.js
│ │
│ ├── layouts/ # 自定義布局目錄，可以寫一個 ProLayout 代替自定義布局
│ │ ├── Basic.vue
│ │ └── User.vue
│ │
│ ├── mocks/ # 本地模擬數(shù)據(jù)
│ │ ├── data/
│ │ ├── setup.mock.js
│ │ └── users.mock.js
│ │
│ ├── store/ # 狀態(tài)管理
│ │ ├── plugins/
│ │ │ ├── persist.js
│ │ │ └── qiankun.js
│ │ ├── modules/ # 除非業(yè)務(wù)過于復(fù)雜，否者不推薦
│ │ │ ├── cart.js
│ │ │ └── products.js
│ │ ├── getters.js # 根級別的 getters
│ │ ├── actions.js # 根級別的 action
│ │ ├── mutations.js # 根級別的 mutation
│ │ └── index.js
│ │
│ ├── router/
│ │ ├── routes.js # 路由配置
│ │ └── index.js
│ │
│ ├── services/ # 全局?jǐn)?shù)據(jù)請求
│ │
│ ├── views/ # 頁面級組件
│ │ ├── Home/
│ │ │ ├── components/ # 頁面級組件
│ │ │ ├── services/ # 頁面級組數(shù)據(jù)請求
│ │ │ │ └── repo.js
│ │ │ └── Home.vue
│ │ │
│ │ └── About/
│ │ ├── components/
│ │ └── About.vue
│ │
│ ├── login.js # 登錄頁入口
│ └── main.js # 應(yīng)用入口
│
├── .browserslistrc
├── .env
├── .editorconfig
├── .eslintrc.js
├── .prettierrc
├── babel.config.js
├── vue.config.js
├── LICENSE.md
├── jsconfig.json
└── package.json
1、public 靜態(tài)資源目錄
這里的內(nèi)容不會被編譯，直接復(fù)制到編譯輸出目錄。
2、assets
全局資源目錄，這里存放源碼中使用到的靜態(tài)資源，會和源碼一起被編譯。
3、components
項(xiàng)目通用的組件庫，推薦目錄形式：
components/
└── UserSelectTable/
├── style/ # 組件樣式
│ ├── _var.scss
│ └── index.scss
├── UserSelectTable.vue
└── index.js # 組件出口文章來源：http://www.zghlxwxcb.cn/news/detail-487307.html
一個組件一個目錄，方便后期遷移項(xiàng)目，獨(dú)立成一套業(yè)務(wù)文章來源地址http://www.zghlxwxcb.cn/news/detail-487307.html
到了這里，關(guān)于Vue3.0-創(chuàng)建Vue3.0項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
