vue的Single-file components不能直接使用，必須透過 vue-loader 來解析文件，組成一個 CommonJS 模組，最後透過 module.exports 輸出一個 Vue.js 元件

https://www.zhihu.com/question/56820346   require，import区别？


也就是說需要打包 webpack 解析→組成 CommonJS 模組，module.exports 輸出成一個 Vue.js 元件。

1. vue官網安裝 cli
   npm install -g @vue/cli 
2. 檢查vue的版本
   vue --version
3. npm install -g @vue/cli-init
4. vue init webpack hello
5. enter, enter, enter,....(大致如下）

安裝vue-cli
https://cythilya.github.io/2017/04/02/vue-cli/


你可以在 vuejs-templates 查看專案樣板：

• webpack-simple：只包含 vue-loader 的簡單樣板。
• webpack：在 webpack-simple 上再包含熱重載、測試、linting、CSS抽取等工具，是最完整的樣板。
• browserify-simple：只包含 vueify 的簡單樣板。
• browserify：在 browserify-simple 上再包含熱重載、測試、linting、CSS抽取等工具，是最完整的樣板。
• simple：只包含一個 html 檔。

註：webpack 和 browserify 都是打包工具，用途一樣擇一使用即可。

安裝指令會透過問問題的方式讓你選擇是否安裝它提供的套件，你可以一路按 Enter 使用預設值。完成後，它會提示你如何開始：

1. 進入專案目錄：cd hello
2. 安裝套件：npm install 或 yarn
3. 執行：npm run dev 或 yarn run dev

如果一切順利，會啟動一個開發用的伺服器，並且自動開啟瀏覽器顯示執行的頁面。按 Ctrl + C可以停止伺服器。

你可以查看 README.md，裡面有提到建置相關的指令，例如：

• npm install：安裝相依套件。
• npm run dev：運行開發用伺服器，並且在檔案變動時自動重新整理。
• npm run build：建立最終可執行的檔案，輸出到 dist 目錄。
• npm run unit：執行單元測試。

先切換到你想建立專案的目錄，然後執行：

vue init webpack hello

init 會建立新專案；webpack 是選擇要建立的專案樣板；hello 是專案目錄的名稱。



撰寫第一個 .vue 文件   ....看到"二：加在 MyApp.vue 中"
http://blog.tonycube.com/2017/05/vuejs-10-single-file-components.html   這個寫得很棒！

在 HTML 中，任何元素都是不分大小寫的，所以元件名稱在轉成 HTML 元素時會轉成小寫並加上分隔線，以下舉例：

• 檔案名稱 App.vue：轉換成 <app></app>，即使用你寫成 <App></App> 或<App/>是可以，但瀏覽器看到的是仍是小寫的元素。
• 檔案名稱 MyApp.vue：轉換成 <my-app></my-app>，這就是要注意的情況，如果元素名稱用錯，Vue.js 會出現未註冊元件的警告。注意，如果寫<MyApp></MyApp>或<MyApp/>也是可以的

結構structure說明，指令command說明
https://vuejs-templates.github.io/webpack/structure.html



eslint算是一个代码语法规范检查的工具，不同意就不会把检查语法规范的功能加进webpack编译的流程里
https://flaviocopes.com/eslint/

針對vue安裝工具→https://dotblogs.com.tw/kinanson/2017/09/11/221519


查看npm某安装檔的板号

项目下局部作用域下安装的包：

Bash

npm list 包名
npm ls 包名

全局范围内安装的包：

Bash

npm list 包名 -g
npm ls 包名 -g

https://newsn.net/say/npm-version.html


小補充
1.

如果要查看某个模块的版本号，可以使用命令如下：

$ npm list grunt

projectName@projectVersion /path/to/project/folder
└── grunt@0.4.1

2.
<style> 的內容預設是全域的，如果你想讓它只在這個元件中有效(區域)，可以加上 scoped 屬性，例如：

<style scoped>...</style>