Vue筆記:安裝配置node.js及使用vue-cli建立專案
Node.js安裝配置
安裝配置教程:https://www.cnblogs.com/aizai846/p/11441693.html
注意:使用npm下載包的時候配置代理
臨時使用淘寶映象
npm --registry https://registry.npm.taobao.org install -global 包名
永久配置淘寶映象
npm install -global cnpm --registry=https://registry.npm.taobao.org
cnpm install 包名
vue-cli建立專案
以下轉載:https://www.jianshu.com/p/32beaca25c0d
前期準備
在完成前面的工作以後(安裝配置node.js,安裝webpack),現在繼續安裝vue-cli:
npm --registry https://registry.npm.taobao.org install -global vue-cli
驗證安裝,使用vue --version驗證安裝是否成功:
當然你也可以到配置的node_global目錄下檢視是否安裝成功:
用vue-cli來構建專案
1、我首先在D盤新建一個資料夾(dxl_vue)作為專案存放地,然後使用命令列cd進入到專案目錄輸入:
vue init webpack baoge
baoge是自定義的專案名稱,命令執行之後,會在當前目錄生成一個以該名稱命名的專案資料夾。
輸入命令後,會跳出幾個選項讓你回答:
- Project name (baoge): -----專案名稱,直接回車,按照括號中預設名字(注意這裡的名字不能有大寫字母,如果有會報錯Sorry, name can no longer contain capital letters),阮一峰老師部落格為什麼檔名要小寫 ,可以參考一下。
- Project description (A Vue.js project): ----專案描述,也可直接點選回車,使用預設名字
- Author (): ----作者,輸入dongxili
接下來會讓使用者選擇: - Runtime + Compiler: recommended for most users 執行加編譯,既然已經說了推薦,就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅執行時,已經有推薦了就選擇第一個了 - Install vue-router? (Y/n) 是否安裝vue-router,這是官方的路由,大多數情況下都使用,這裡就輸入“y”後回車即可。
- Use ESLint to lint your code? (Y/n) 是否使用ESLint管理程式碼,ESLint是個程式碼風格管理工具,是用來統一程式碼風格的,一般專案中都會使用。
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設,編寫vue專案時的程式碼風格,直接y回車 - Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試,我選擇安裝y回車
- Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ,我選擇安裝y回車
回答完畢後上圖就開始構建專案了。
2、 配置完成後,可以看到目錄下多出了一個專案資料夾baoge,然後cd進入這個資料夾:
安裝依賴:
npm install
如果安裝速度太慢。可以安裝淘寶映象,開啟命令列工具,輸入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
(然後使用cnpm
來安裝 )
npm install :安裝所有的模組,如果是安裝具體的哪個個模組,在install 後面輸入模組的名字即可。而只輸入install就會按照專案的根目錄下的package.json檔案中依賴的模組安裝(這個檔案裡面是不允許有任何註釋的),每個使用npm管理的專案都有這個檔案,是npm操作的入口檔案。因為是初始專案,還沒有任何模組,所以我用npm install 安裝所有的模組。安裝完成後,目錄中會多出來一個node_modules資料夾,這裡放的就是所有依賴的模組。
然後現在,baoge資料夾裡的目錄是這樣的: 解釋下每個資料夾代表的意思(仔細看一下這張圖):3.啟動專案
npm run dev如果瀏覽器開啟之後,沒有加載出頁面,有可能是本地的 8080 埠被佔用,需要修改一下配置檔案 config裡的index.js
還有,如果本地除錯專案時,建議將build 裡的assetsPublicPath
的路徑字首修改為 ' ./ '(開始是 ' / '),因為打包之後,外部引入 js 和 css 檔案時,如果路徑以 ' / ' 開頭,在本地是無法找到對應檔案的(伺服器上沒問題)。所以如果需要在本地開啟打包後的檔案,就得修改檔案路徑。
我的埠沒有被佔用,直接成功(服務啟動成功後瀏覽器會預設開啟一個“歡迎頁面”):
4.vue-cli的webpack配置分析
- 從
package.json
可以看到開發和生產環境的入口。
- 可以看到dev中的設定,build/webpack.dev.conf.js,該檔案是開發環境中webpack的配置入口。
- 在webpack.dev.conf.js中出現webpack.base.conf.js,這個檔案是開發環境和生產環境,甚至測試環境,這些環境的公共webpack配置。可以說,這個檔案相當重要。
- 還有config/index.js 、build/utils.js 、build/build.js等,具體請看這篇介紹:
https://segmentfault.com/a/1190000008644830
5.打包上線
注意,自己的專案檔案都需要放到 src 資料夾下。
在專案開發完成之後,可以輸入 npm run build
來進行打包工作。
npm run build
另:
1.npm 開啟了npm run dev以後怎麼退出或關閉?
ctrl+c
2.--save-dev
自動把模組和版本號新增到模組配置檔案package.json中的依賴裡devdependencies部分
3. --save-dev 與 --save 的區別
--save 安裝包資訊將加入到dependencies(生產階段的依賴)
--save-dev 安裝包資訊將加入到devDependencies(開發階段的依賴),所以開發階段一般使用它
打包完成後,會生成 dist 資料夾,如果已經修改了檔案路徑,可以直接開啟本地檔案檢視。
專案上線時,只需要將 dist 資料夾放到伺服器就行了。