[Toc] # Vue-cli 全解 ## Vue-cli，開始 一、安裝vue-cli 安裝vue-cli的前提是你已經安裝了npm，安裝npm你可以直接下載node的安裝包進行安裝。你可以在命令行工具里輸入npm -v 檢測你是否安裝了npm和版本情況。出現版本號說明你已經安裝了npm和node，我這里的npm版本為3.10.10。如果該命令不可以使用，需要安裝node軟件包，根據你的系統版本選擇下載安裝就可以了。 下載地址：http://nodejs.cn/download/ npm沒有問題，接下來我們可以用npm 命令安裝vue-cli了，在命令行輸入下面的命令： npm install vue-cli -g 1 npm install vue-cli -g -g :代表全局安裝。如果你安裝時報錯，一般是網絡問題，你可以嘗試用cnpm來進行安裝。安裝完成后，可以用vue -V來進行查看 vue-cli的版本號。注意這里的V是大寫的。我這里版本號是2.8.1. 如果vue -V的命令管用了，說明已經順利的把vue-cli安裝到我們的計算機里了。 二、初始化項目 **一直轉圈圈怎么辦** 一、遇到這一步，一般都是在等去網上找了下也沒有人發出解決方法，現在無私為大家解決一下，先取消該下載，重新打開 ，利用淘寶鏡像先下載 webpack 包 下載命令： ``` $ cmpm install --save-dev webpack ``` 下載成功，我們用vue init命令來初始化項目，具體看一下這條命令的使用方法。 ``` $ vue init <template-name> <project-name> ``` 二、使用--offline安裝webpack 去網上下載webpack模板 放在 ``` C:\Users\用戶名稱\.vue-templates ``` 里然后在項目位置使用 ``` vue init (包名) （項目名） --offline ``` init：表示我要用vue-cli來初始化項目 <template-name>：表示模板名稱，vue-cli官方為我們提供了5種模板， webpack-一個全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測和CSS擴展。 webpack-simple-一個簡單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開發環境。 browserify-一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。 browserify-simple-一個簡單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開發環境。 simple-一個最簡單的單頁應用模板。 <project-name>：標識項目名稱，這個你可以根據自己的項目來起名字。 在實際開發中，一般我們都會使用webpack這個模板，那我們這里也安裝這個模板，在命令行輸入以下命令： ``` vue init webpack vuecliTest ``` 輸入命令后，會詢問我們幾個簡單的選項，我們根據自己的需要進行填寫就可以了。 Project name :項目名稱 ，如果不需要更改直接回車就可以了。注意：這里不能使用大寫，所以我把名稱改成了vueclitest Project description:項目描述，默認為A Vue.js project,直接回車，不用編寫。 Author：作者，如果你有配置git的作者，他會讀取。 Install vue-router? 是否安裝vue的路由插件，我們這里需要安裝，所以選擇Y Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。我們這里不需要輸入n，如果你是大型團隊開發，最好是進行配置。 setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha，我們這里不需要，所以輸入n。 Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行為模擬測試，我們這里不需要，所以輸入n。 命令行出現上面的文字，說明我們已經初始化好了第一步。命令行提示我們現在可以作的三件事情。 1、cd vuecliTest 進入我們的vue項目目錄。 2、npm install 安裝我們的項目依賴包，也就是安裝package.json里的包，如果你網速不好，你也可以使用cnpm來安裝。 3、npm run dev 開發模式下運行我們的程序。給我們自動構建了開發用的服務器環境和在瀏覽器中打開，并實時監視我們的代碼更改，即時呈現給我們。 出現這個頁面，說明我們的初始化已經成功，現在可以快樂的玩耍了。 # Vue webpack打包的時候iviewui的字體不顯示問題  修改字體權重