1.配置服務(wù)器
直接使用帶nodejs的服務(wù)器進(jìn)行啟動(dòng)
- 安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安裝vue
cnpm install -g @vue/cli
2.創(chuàng)建項(xiàng)目
2.1使用npm 創(chuàng)建項(xiàng)目
- 創(chuàng)建項(xiàng)目
vue create www
- 啟動(dòng)項(xiàng)目
cd www
npm run serve
2.2使用vite創(chuàng)建項(xiàng)目
建議使用vite創(chuàng)建項(xiàng)目怪得，因?yàn)関ite速度非常的快，相當(dāng)于秒開归苍。
項(xiàng)目創(chuàng)建完之后預(yù)覽調(diào)試可以直接使用只恨。不需要配置其他的選項(xiàng)贴膘。
3.預(yù)覽調(diào)試
- 配置預(yù)覽調(diào)試文件
.vscode/preview.yml
# .vscode/preview.yml
autoOpen: false # 打開工作空間時(shí)是否自動(dòng)開啟所有應(yīng)用的預(yù)覽
apps:
- port: 8081 # 應(yīng)用的端口
run: npm run serve # 應(yīng)用的啟動(dòng)命令
root: ./www # 應(yīng)用的啟動(dòng)目錄
name: my-second-app # 應(yīng)用名稱
description: 我的第一個(gè) App卖子。 # 應(yīng)用描述
- 配置外網(wǎng)訪問權(quán)限
新建一個(gè)vue.config.js，添加一下內(nèi)容刑峡。
module.exports = {
devServer: {
disableHostCheck: true
}
}
4. 啟動(dòng)預(yù)覽窗口
ctrl+shift+p洋闽，輸入preview玄柠。
