一、安裝vue-cli
vue-cli是vue的腳手架工具，用於快速搭建vue項目。讓開發者只關心項目本身，而不去關注項目的開發環境。
在安裝vue-cli之前，我們先安裝webpack，在命令行工具輸入下面代碼。
npm install --save-dev webpack
安裝完成之后輸入webpack -v，如果出現相應的版本號，則說明安裝成功
再在命令行工具輸入下面的代碼，回車即可安裝。（報錯的可以使用cnpm試試，最后的圖片中有提到），這里就默認你安裝node.js
npm install -g vue-cli
二、使用vue-cli創建項目
命令行輸入下面的代碼開始搭建項目
vue init <template-name> <project-name> 其中的
<template-name>是項目模板，<project-name>是你的項目名稱
template-name包括：
- webpack
- webpack-simple // 一個簡單webpack+vue-loader的模板，不包含其他功能。
- browserify // 一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。
- browserify-simple // 一個簡單Browserify+vueify的模板，不包含其他功能。
- pwa // 基於webpack模板的vue-cli的PWA模板
- simple // 一個最簡單的單頁應用模板
常用webpack就行了，其他模板我也沒用過，感興趣的自己可以去試試
vue init webpack my-project 我們輸入命令后會讓用戶輸入幾個選項
注意：項目的名稱這里不能大寫
- Project name : 項目名稱 ，如果不需要更改直接回車就可以了。注意：這里不能使用大寫。
- Project description: 項目描述，默認為A Vue.js project,直接回車，不用編寫。
- Author： 作者，如果你有配置git，他會讀取.ssh文件中的user。
- Install vue-router? 是否安裝vue的路由插件，Y代表安裝，N無需安裝，下面的命令也是一樣的，稍微大一點的項目一般我們都會用到的。
- Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。這個可以選NO，不然，提示太多了說很煩。
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha。 - Setup e2e tests with Nightwatch? 是否安裝e2e來進行用戶行為模擬測試。
- Should we run npm install for you after the project has been created?(recommended)npm
詢問你使用npm安裝還是yarn安裝包依賴，我這里選擇的是npm，yarn更快更好，使用yarn之前確保你的電腦已經安裝yarn。
三、運行項目
項目搭建完成后，我們需要進入項目跟目錄中初始化項目，cd進項目跟目錄，輸入npm i。
npm i
項目初始化完成后就會在跟目錄中多一個node-modules文件夾，這里面放了項目中用到的依賴。
我們來看一下項目目錄
接下來我們的操作一般都在 src文件夾中，其他的文件中有一些配置，配置好了就不用去關心，我簡單說下這幾個重要的文件夾
assets 這個文件夾中存放一些資源，比如我們需要的css樣式文件，字體文件，JS文件一般都放在這個文件夾里面
component 這個文件夾是放組件的文件夾，就是相當於是項目中的每個小項目的文件放的是.vue文件
router 是存放路由文件夾，里面有個.js文件，用來配置路由，
App.vue 相當於是我們的整個項目的一個匯總文件。
main.js 頁面的入口文件，所有用到的文件都需要在這里面導入，最終渲染到頁面。
另外還有兩個配置文件build文件下的webpack.base.conf.js和package.json，這兩個進行項目的一些其他配置，
運行下面命令（工具安裝完成后，其他命令都是在項目的跟目錄下運行的）
npm run dev
這樣我們的項目就可以跑起來
在瀏覽輸入http://localhost:8080就可以看到默認的項目了，
項目搭建就說到這里了，接下來我說一下我在搭建和運行中的一些問題，
四、總結
1、關於mint-ui
我在項目開發中用到mint-ui組件和mui庫，mint-ui是需要安裝依賴的，大家可以去官網看看API文檔，
cnpm install mint-ui --save-dev
依賴安裝完成后，如果要樣式生效的話，還需要導入樣式文件，但是。我們為了避免導入樣式文件的話我們還需要安裝babel-plugin-component 插件，
cnpm install babel-plugin-component -D
安裝完babel-plugin-component 插件后，還需要在.babelrc文件中進行配置，即是在plugins屬性后面添加
["component", [ { "libraryName": "mint-ui", "style": true } ]] 這樣ming-ui樣式才能生效
2、關於mui
在使用mui過程中，mui就想是bootstrap一樣，需要引入樣式文件，這里需要注意的，樣式文件不只是css文件，還需要一些字體文件，但是字體文件並不需要導入到項目，我大膽猜測，應該是css文件中引入了字體文件，用的路徑是基於css文件的，所以我們在使用mui時一定要將css文件和fonts文件一並放入到項目中。
3、關於css樣式
在導入公共樣式的時候，如果用的是scss的話是需要安裝依賴的
cnpm i scss-loader -D
安裝完成后，打開webpack.config.js 配置這個文件，在module節點里面的rules屬性，這個屬性是個數組，存放所有第三方的匹配和處理規則。
這是我們在項目中遇到的一些問題，希望對大家有所幫助，這么一總結感覺沒什么太大問題了， 我們在網上看到了一張vue-cli的圖總結得很不錯，我加了一些東西在上面。綜上所述全憑個人理解總結，若表述有誤，還望各位及時告知，以免混淆。
作者：Guido_van_zijef
鏈接：https://www.jianshu.com/p/8ff0d5bff231
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。