這個專案目錄是用vue-cli搭建而成的,所以我們首先先從vue-cli開始。
安裝vue-cli
$ npm install -g vue-cli
安裝完成之後,我們可以在命令列直接輸入vue
使用vue-cli
$ vue init
第乙個是模板名稱,第二個是專案名稱,模板有webpack,webpack-****** ,browserify ,browserify-****** ,******我們這個專案使用的是webpack。
下面我們就來進行我們的專案搭建:
vue init webpack myshell
這樣就生成了乙個專案目錄,我們按照它的提示
cd myshell
npm install
npm run dev
執行完成,會自動開啟瀏覽器訪問http://localhost:8080/ 也就是我們的專案首頁,下面我們介紹一下整體的專案目錄和webpack配置項。
1.build和config都是webpack配置
2.src是存放專案原始檔的目錄
3.static 存放第三方靜態資源,這個裡面的gitkeep是這個目錄為空,也可以把這個目錄提交的git倉庫裡面,因為通常乙個空目錄是不能提交git倉庫裡面的
4.babelrc 是babel的配置項。
5.editorconfig是編輯器的配置項
6.gitignore裡面存放的是會忽略語法檢查的目錄
7.index.html 入口頁面
8.package.json是專案的描述和依賴,我們在開始的時候執行npm run dev
,就相當於執行了這個檔案裡面的scripts的dev對應的 node build/dev-server.js。
"scripts": ,
vue cli搭建及專案目錄結構
今天總結一下vue的腳手架的搭建。很簡單,今天我們就來說一下 一 vue 腳手架的搭建。對於腳手架的具體搭建方法,我這裡不在很詳細的書寫,具體方法我推薦菜鳥教程的方法,和具體,你一步一步的來就可以實現。鏈結位址 vue2.0腳手架的搭建 二 vue腳手架目錄 我們來詳細的介紹一下這些目錄 一級目錄 ...
使用 vue cli 搭建專案
vue cli 是乙個官方發布 vue.js 專案腳手架,使用 vue cli 可以快速建立 vue 專案,github位址是 vue cli 3.x 已經發布,如果使用 3.x 構建專案,請參考 vue 爬坑之路 十二 vue cli 3.x 搭建專案 一 安裝 node.js 只是這樣安裝的 n...
使用 vue cli 搭建專案
vue cli 是什麼及為什麼要使用他 vue 提供了乙個官方的 cli,為單頁面應用 spa 快速搭建繁雜的腳手架。它為現代前端工作流提供了 batteries included 的構建設定。只需要幾分鐘的時間就可以執行起來並帶有熱過載 儲存時 lint 校驗,以及生產環境可用的構建版本。更多詳情...