斌記-關於WEB前端、小程式、UI設計的筆記
1.安裝node.js
總結一下,教程裡是讓你去https://nodejs.org/en/download/ 下載安裝一個node.js ,如下圖,下載紅圈這個(我是64位,32的自己看)。。下載完了以後安裝就行了(可以一路點確定,安裝到C盤,也可以自己選擇安裝到其他盤。無所謂)
2.開啟命令視窗
在命令裡輸入: npm install -g cnpm --registry=https://registry.npm.taobao.org
3.獲取到cnpm以後,我們需要升級一下,輸入下面的命令
在命令裡輸入: cnpm install cnpm -g
4.開始安裝VUE!
在命令裡輸入: cnpm install vue
5.安裝vue-cli
在命令裡輸入: cnpm install --global vue-cli
至此VUE環境已經搭建完成!
下面開始建立個vue專案
1.找個地方放你的專案,例如E盤 ,cd..和cd 進入到E盤。
2.執行下面程式碼
vue init webpack "專案名稱"
例如(這是讓你命名專案資料夾這一步以後你的碟符下面會出現一個你自己起的名字的資料夾):
然後出這個projectname 以後,一路點確定就行了(這是讓你命名專案的名)
如果你是新手,下圖紅圈中是一路點回車,直接是全部yes。。後面我會解釋一下這幾個yes具體是什麼東西。
等他自己執行,執行完成以後分別執行下面這兩句程式碼
1.執行這個是安裝
cnpm install
2.執行這個是執行環境(後面命令視窗不小心關了直接執行這個就行了)
cnpm run dev
3. 成功以後命令窗口出現 讓你進 loaclhost ,那就是成功了
4.進入瀏覽器的 loaclhost:8080 就出這個。
5. 專案執行必須要開著命令視窗。
如果不小心關了就執行最後一句程式碼就行。
附加:
附上VUE的專案目錄註釋(紅色是重要的2個目錄)
├── build --------------------------------- webpack相關配置檔案
│ ├── build.js --------------------------webpack打包配置檔案
│ ├── check-versions.js ------------------------------ 檢查npm,nodejs版本
│ ├── dev-client.js ---------------------------------- 設定環境
│ ├── dev-server.js ---------------------------------- 建立express伺服器,配置中介軟體,啟動可熱過載的伺服器,用於開發專案 │ ├── utils.js --------------------------------------- 配置資源路徑,配置css載入器
│ ├── vue-loader.conf.js ----------------------------- 配置css載入器等
│ ├── webpack.base.conf.js --------------------------- webpack基本配置
│ ├── webpack.dev.conf.js ---------------------------- 用於開發的webpack設定
│ ├── webpack.prod.conf.js --------------------------- 用於打包的webpack設定
├── config ---------------------------------- 配置檔案
├── node_modules ----------------------------
存放依賴的目錄
├── src ------------------------------------- 原始碼
│ ├── assets ------------------------------ 靜態檔案
│ ├── components -------------------------- 元件
│ ├── main.js ----------------------------- 主js
│ ├── App.vue ----------------------------- 專案入口元件
│ ├── router ------------------------------ 路由
├── package.json ---------------------------- node配置檔案
├── .babelrc--------------------------------- babel配置檔案
├── .editorconfig---------------------------- 編輯器配置
├── .gitignore------------------------------- 配置git可忽略的檔案