環境建置
- Node.js：官網下載 (自帶 npm)
//檢查是否安裝成功node -v//若安裝失敗、太慢、卡住（資源問題，沒有配置淘寶鏡像）npm config set registryhttps://registry.npm.taobao.org//驗證是否配置成功npm config get registry
- Vue.js：
// 安裝最新版本 vue 版本 3 以上
npm install -g @vue/cli// vue 版本 3 以下
npm uninstall -g vue-cli// 檢查版本
vue -V// 檢查當前專案使用的版本
npm list vue version
vue 安裝失敗，解決 → 升級 node 版本
const wslToWindowsPath = async path => {
^^^^
SyntaxError: Unexpected identifier
// 清除npm cache
sudo npm cache clean -f// 安装 n 模块
sudo npm install -g n// node 安装最新稳定版本
sudo n stable// node 安裝指定版本
sudo n x.x.x
專案建置
vue init <樣板名稱> <專案名稱> //vue-cli 3以下
vue create <專案名稱> //vue-cli 3以上目前 Vue Cli 提供了六種基本樣板：
webpack
webpack-simple
browserify
browserify-simple
pwa
simple
- vue init 會遇到的 環境設定
Project name：專案名稱
Project description：專案描述
Author：作者名稱
Vue build：Runtime + Compiler 及 Runtime-only 兩種（建議使用預設的第一種）
Install vue-router：是否安裝 vue-router
Use ESLint to lint your code：是否使用 ESLint 來規範程式碼
Pick an ESLint preset：Standard、Airbnb 及 none 三種
Set up unit tests：是否加入單元測試
Setup e2e tests with Nightwatch：是否加入 e2e 測試
Should we run `npm install` for you after the project has been created：完成後是否自動執行 npm install
- vue create 使用預設回答，按 Enter 即可
運行專案
cd 到專案底下後
cd <專案名稱>
npm run dev //vue-cli 2.x
npm run serve //vue-cli 3.x以上
Vue Cli 3 GUI圖形化介面
vue ui輸入後會在瀏覽器自動開啟，可以在新增 → 新增專案，用圖形介面化的方式建立專案（就不用打指令了）
專案結構
run 大神專案時都會先
npm install解析 Install 執行過程
1. 查詢 node_modules 目錄 (若沒有就會新創建)
2. 依照 package.json 設定安裝此專案相關的套件到 node_modules
3. install 後確定安裝的版本號會寫入到 package-lock.json (可以想成紀錄此次 install 的版本號)
更詳細請參考
介紹幾個基礎常用的路徑：
index.html：預設啟動頁面
package.json：npm 套件設定檔
App.vue：啟動元件
main.js：Vue 實例啟動入口
webpack.config.js：webpack 設定檔
更詳細請參考
