環(huán)境準(zhǔn)備

Vue-cli是Vue官方提供的一個腳手架，用戶快速生成一個Vue的項目模板。

Vue-cli提供了如下功能：

• 統(tǒng)一的目錄結(jié)構(gòu)
• 本地調(diào)試
• 熱部署
• 單元測試
• 集成打包上線

需要安裝Node.js

安裝Vue-cli

npm install -g @vue/cli

通過vue --version指令查看是否安裝成功。

Vue項目創(chuàng)建

命令行方式：

vue create vue-project-name

圖形化界面方式：

vue ui

圖形化方式步驟：

簡單設(shè)置后，點擊Next。

選擇手動，之后點擊Next。

其他配置默認(rèn)即可，但是一定要選擇Router（路由功能）。

選擇Vue版本和語法解析方式。

最后，進(jìn)行項目創(chuàng)建。

Vue項目的目錄結(jié)構(gòu)

基于Vue腳手架創(chuàng)建出來的工程，有標(biāo)準(zhǔn)的目錄結(jié)構(gòu)，如下：

文件/目錄	用途
node_modules	整個項目的依賴包
public	存放項目的靜態(tài)文件
src	存放項目的源代碼
package.json	模塊基本信息，項目開發(fā)所需要模塊、版本信息
vue.config.js	保存vue配置的文件，如：代理、端口的配置等

src目錄下內(nèi)容：

文件/目錄	用途
assets	靜態(tài)資源
components	可重用的組件
router	路由配置
views	視圖組件（頁面）
App.vue	入口頁面（根組件）
main.js	入口js文件

Vue項目啟動

圖形化方式：vscode下的npm腳本中的serve。

命令行：

npm run serve

Vue項目配置端口號

在vue.config.js中添加：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {port:7070,}
})