基於Vue-cli 快速搭建項目

Vue-cli 能夠快速幫助咱們建立一個項目，這是官方給咱們提供的腳手架。下面我說一下 vue-cli 的使用方法。

1、準備工做

在使用 vue-cli 時，首先須要安裝 nodejs ， npm ，其次需全局安裝 vue 和 vue-cli

一、nodejs 和 npm 安裝方法詳見https://www.cnblogs.com/le220/p/8670349.html

二、npm install -g vue

三、npm install -g vue-cli

2、vue-cli 快速搭建項目

安裝完成後， 同時在 C:\Users\Andminster\AppData\Roaming\npm 目錄下爲會生成幾個文件 。

3、配置環境變量

Vue 不是內部或外部命令問題解決

表示系統沒有找到 vue.cmd 的地址，須要將 vue.cmd 的地址添加到系統環境變量的 path 中。

能夠全局搜索， vue.cmd

右鍵選擇「打開文件所在目錄」，將該目錄添加至系統環境變量path中：

電腦——屬性——高級系統設置

4、 安裝完成後，建立本身的工做空間，在 cmd 切換至剛剛建立好的工做空間，若是已經有工做空間，直接切換到工做空間便可。

使用命令建立項目

vue init webpack test

test 是項目名稱，這個名字本身隨便取。

命令輸入後，會進入安裝階段，須要用戶輸入一些信息

1 、 Project name (vuetest) 項目名稱，能夠本身指定，也可直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，若是有會報錯 Sorry, name can no longer contain capital letters ）。

2 、 Project description (A Vue.js project) 項目描述，也可直接點擊回車，使用默認名字

接下來會讓用戶選擇

3 、 接下來也是選擇題 Pick an ESLint preset (Use arrow keys) 選擇一個 ESLint 預設，編寫 vue 項目時的代碼風格，由於我選擇了使用 ESLint

4 、 Standard (https://github.com/feross/standard) 標準

5 、 AirBNB (https://github.com/airbnb/javascript) JavaScript 最合理的方法，這個 github 地址說的是 JavaScript 最合理的方法

6 、 none (configure it yourself) 這個不用說，本身定義風格

具體選擇哪一個因人而異吧 ，我選擇標準風格

7 、 Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝

8 、 Setup e2e tests with Nightwatch(Y/n)? 是否安裝 e2e 測試 ，我選擇安裝

9 、 完成

5、運行項目

在項目文件夾下執行 npm install （安裝依賴包）， npm run dev （運行項目）。

在運行項目中若是遇到端口被佔用，找到bulid文件夾下的webpack-dev-server.js修改 port 便可。