緣起
在我們?nèi)粘ｉ_發(fā)生活中，經(jīng)常遇到要執(zhí)行某段代碼，或者demo的時(shí)候，這個(gè)時(shí)候往往需要進(jìn)行新建個(gè)文件夾，再新建html，甚至還需要新建js，css，等一系列繁瑣的操作，如果要新建解析vue文件就更加麻煩了，使用vue cli也會(huì)耗費(fèi)不少時(shí)間。搞起來非常麻煩。
這里提供一個(gè)簡單快捷的方法，可以針對(duì)單個(gè)vue文件進(jìn)行解析，不需要安裝其他任何依賴，整個(gè)目錄文件只需要一個(gè)app.vue文件即可。
如圖：
解析下來是：
下面來實(shí)現(xiàn)一下:
- 首先安裝全局?jǐn)U展:
npm install -g @vue/cli-service-global
vue serve 的缺點(diǎn)就是它需要安裝全局依賴，這使得它在不同機(jī)器上的一致性不能得到保證。因此這只適用于快速原型開發(fā)。
-
新建一個(gè)文件夾，起一個(gè)叫app.vue的文件：
image.png 然后在這個(gè) App.vue 文件所在的目錄下運(yùn)行：
vue serve
vue serve 使用了和 vue create 創(chuàng)建的項(xiàng)目相同的默認(rèn)設(shè)置 (webpack、Babel、PostCSS 和 ESLint)。它會(huì)在當(dāng)前目錄自動(dòng)推導(dǎo)入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一個(gè)。你也可以顯式地指定入口文件：
vue serve MyComponent.vue
如果需要，你還可以提供一個(gè) index.html、package.json、安裝并使用本地依賴、甚至通過相應(yīng)的配置文件配置 Babel、PostCSS 和 ESLint。
- 你也可以使用 vue build 將目標(biāo)文件構(gòu)建成一個(gè)生產(chǎn)環(huán)境的包并用來部署：
vue build MyComponent.vue
總結(jié)
針對(duì)單個(gè)vue文件進(jìn)行解析構(gòu)建的方案其實(shí)vue cli官方文檔就有，但看周圍同學(xué)用的比較少，像比較冷的知識(shí)，故分享出來水篇文章~
