一直一來，撰寫簡單的網頁應用
都採取 筆記本(Notepad++)
純手寫 HTML、CSS、Javascript
頂多搭配 Bootstrap、Jquery
硬刻出可以運作的原型作品
大多屬於玩票性質
但如果要製作可維護、實用的作品
必須研究目前的主流工具
Node.Js npm
看看這些 高大上的工具
要怎麼挑選適合的框架
是另一門學問，但大部分都逃不了
node.js npm
雖然NodeJs功能廣、前後端皆可應用
但目前觀察到
前端應用是把它當作運行環境的工具
使用npm裝一堆前端框架的工具
以下會用 (坑)
標示出我過程中遇過的問題
目的只有一個
順利執行
(坑)
在一些前端框架
初始完專案後
並不會安裝相依的套件
請執行
npm install
Webpack
管理前端程式碼的工具，可以將撰寫的
JS CSS 集成輸出為一個檔案
撰寫方面可以讓我們將程式碼區分開來
執行面則載入快速
很多前端框架都可以與其配合
以下指令，需要安裝NodeJS後才可以執行
輸入按照順序
npm init
npm會執行專案的初始化，生成專案的JSON檔案
npm install webpack --save-dev
本地安裝 webpack
npm install css-loader style-loader --save-dev
本地安裝 css-loader style-load
npm install sass-loader node-sass extract-text-webpack-plugin --save-dev
本地安裝 sass-loader node-sass extract-text-webpack-plugin 按照順序有其相依性
npm install --save jquery
本地安裝 Jquery
install --save popper.js bootstrap@4.1.1
本地安裝 Bootstrap
若要全域安裝一些Plugin，指令則為
npm install -g [PluginName]
因為有些引用的原因
安裝在本地
比較不會產生無法執行的情況
參考：
這裡 我認為這是較好讀懂的文章
這裡 朋友建議的文章，有些東西不錯，但一直廣告叫我買書
其他前端工具
(坑)
為何只記錄npm指令呢，因為大部分的文章，程式碼是由框架產生，並且撰文者會將新增的程式碼註明
然而指令部分，都假定了讀者已有背景知識，但指令的執行順序及參數，會嚴重影響專案是否可以成功執行
不像程式碼，有明確的錯誤訊息，指令的錯誤通常很難識別，沉重的挫折感，令人感到難過
Vue.js
前端框架這麼多React、Angularjs，做的事情是類似的，參考了網路上許多意見，Vue 聽說是最小、容易使用的
符合我個人的原則，只要能達到效果，盡量小、開發快、容易學，就是最好的選擇
網路上有許多語法、框架教學，而在使用npm安裝的Vue已經自帶使用Webpack
(坑)
使用
vue init webpack-simple [ProjectName]
之後嘗試
npm run dev
會在本機成功開啟頁面
但在
npm run build
後，頁面無法順利執行
後來發現是路徑的問題
在 index.html
模板產生的是
<script src="/dist/build.js">
更改為
<script src="./dist/build.js">
或是
<script src="dist/build.js">
加 點 .或是 去掉 斜線 /
而在webpack.config.js
output: {
...
publicPath:'/dist/'
...
}
將斜線 / 去掉 改為 dist/
就可以順利build
如果我們想要搭配 bootstrap 開發
已經有人把他們包再一起
參考這裡做設定，直接看 vue-cli的部分
環境搞定了，再來開始探究框架的使用
