Vue全家桶之Vue-cli學習筆記
#Vue全家桶之Vue-cli學習筆記
##一、安裝vue-cli
首先檢查是否下載node了,然後用npm -v檢查是否安裝
npm沒有問題,接下來我們可以用npm 命令安裝vue-cli了,在命令列輸入下面的命令:
npm n install vue-cli -g
-g :代表全域性安裝。
我們用vue init命令來初始化專案,具體看一下這條命令的使用方法。
vue init <template-name> <project-name>
如果用webpack打包,一般直接在目錄下打vue init webpack就可以了。
npm install 安裝我們的專案依賴包,也就是安裝package.json裡的包,如果你網速不好,你也可以使用cnpm來安裝。
npm run dev 開發模式下執行我們的程式。給我們自動構建了開發用的伺服器環境和在瀏覽器中開啟,並實時監視我們的程式碼更改,即時呈現給我們。
##第二節Vue-cli專案結構
vue-cli腳手架工具就是為我們搭建了開發所需要的環境,為我們省去了很多精力。有必要對這個環境進行熟悉,我們就從專案的結構講起。
. |-- build // 專案構建(webpack)相關程式碼 | |-- build.js // 生產環境構建程式碼 | |-- check-version.js // 檢查node、npm等版本 | |-- dev-client.js // 熱過載相關 | |-- dev-server.js // 構建本地伺服器 | |-- utils.js // 構建工具相關 | |-- webpack.base.conf.js // webpack基礎配置 | |-- webpack.dev.conf.js // webpack開發環境配置 | |-- webpack.prod.conf.js // webpack生產環境配置 |-- config // 專案開發環境配置 | |-- dev.env.js // 開發環境變數 | |-- index.js // 專案一些配置變數 | |-- prod.env.js // 生產環境變數 | |-- test.env.js // 測試環境變數 |-- src // 原始碼目錄 | |-- components // vue公共元件 | |-- store // vuex的狀態管理 | |-- App.vue // 頁面入口檔案 | |-- main.js // 程式入口檔案,載入各種公共元件 |-- static // 靜態檔案,比如一些圖片,json資料等 | |-- data // 群聊分析得到的資料用於資料視覺化 |-- .babelrc // ES6語法編譯配置 |-- .editorconfig // 定義程式碼格式 |-- .gitignore // git上傳需要忽略的檔案格式 |-- README.md // 專案說明 |-- favicon.ico |-- index.html // 入口頁面 |-- package.json // 專案基本資訊 .
dependencies欄位和devDependencies欄位
dependencies欄位指專案執行時所依賴的模組;
devDependencies欄位指定了專案開發時所依賴的模組;
webpack.base.confg.js webpack的基礎配置檔案
…
…
module.export = { // 編譯入口檔案 entry: {}, // 編譯輸出路徑 output: {}, // 一些解決方案配置 resolve: {}, resolveLoader: {}, module: { // 各種不同型別檔案載入器配置 loaders: { ... ... // js檔案用babel轉碼 { test: /\.js$/, loader: 'babel', include: projectRoot, // 哪些檔案不需要轉碼 exclude: /node_modules/ }, ... ... } }, // vue檔案一些相關配置 vue: {} }
…
…
module.export = {
// 編譯入口檔案
entry: {},
// 編譯輸出路徑
output: {},
// 一些解決方案配置
resolve: {},
resolveLoader: {},
module: {
// 各種不同型別檔案載入器配置
loaders: {
...
...
// js檔案用babel轉碼
{
test: /\.js$/,
loader: 'babel',
include: projectRoot,
// 哪些檔案不需要轉碼
exclude: /node_modules/
},
...
...
}
},
// vue檔案一些相關配置
vue: {}
}
##第3節:解讀Vue-cli的模板
一、npm run build 命令
如何把寫好的Vue網頁放到伺服器上,那我就在這裡講解一下,主要的命令就是要用到npm run build 命令。我們在命令列中輸入npm run build命令後,vue-cli會自動進行專案釋出打包。你在package.json檔案的scripts欄位中可以看出,你執行的npm run build命令就相對執行的 node build/build.js 。
打包時,記得將config目錄下的index.js下的 assetsPublicPath: '/'改為 assetsPublicPath: ‘./’,
這樣就是相對路徑。