運行單個Vue文件;不創建腳手架項目運行.vue文件;寫單個組件查看效果;Vue快速原型開發


你是否遇到不想創建腳手架項目,只想運行單個Vue文件的時候;

是否在寫單個組件時想之間查看這個單Vue文件的效果;

或者僅僅想寫個*.vue文件用於做測試

 

辦法如下:

1、首先進入終端,全局安裝vue/cli-service-global

npm install -g @vue/cli-service-global

 

2、在編輯器的Vue文件所在的文件夾目錄下進入終端,啟動文件

vue serve

 

3、或是直接在終端中 cd 進入Vue文件夾目錄下,啟動文件

某盤:\Vue文件所在的文件夾> vue serve Vue文件名.vue  vue serve

 

需要注意的是:

1、使用( vue serve ) 命令的話,會在當前目錄自動推導入口文件——入口可以是 main.jsindex.jsApp.vue 或 app.vue 中的一個,若不是則報錯。

 

 

 可將文件名改為VueCLI的默認入口文件名( App.vue 或 app.vue ),也可以如下解決

 

2、使用( vue serve Vue文件名.vue ) 命令的話,就無需必定是上面的入口文件了,就可以自己顯式地指定入口文件名了

推薦使用,寫單個組件查看效果時極為方便!

 

 

基礎代碼為:

<template> <div> {{txt}} </div> </template> <script> export default{ name:'A_a', data(){ return{ txt:'我是數據' } }, created(){ }, methods:{ } } </script> <style scoped></style> 

  

 

 也可移步去Vue官網的:VueCLI快速原型開發與單文件組件去了解更多內容:

https://cli.vuejs.org/zh/guide/prototyping.html#vue-serve, https://cn.vuejs.org/v2/guide/single-file-components.html

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM