你是否遇到不想創建腳手架項目,只想運行單個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.js
、index.js
、App.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