1.安裝node.js
下載安裝node.js，一路默認(rèn)安裝即可烙样，安裝完畢开仰，啟動(dòng)命令行，輸入命令node -v颂郎，可以看到node.js的版本號
2.安裝vue-cli
使用npm（需要安裝node環(huán)境）全局安裝webpack吼渡，啟動(dòng)命令行，輸入如下命令：
npm install -g webpack
耐心等待安裝完成之后輸入 webpack -v乓序，可以看到如圖所示
從webpack 4.X開始寺酪，需要全局安裝webpack-cli
npm install webpack webpack-cli -g
全局安裝vue-cli坎背，在cmd中輸入命令
npm install --global vue-cli
耐心等待安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如下圖寄雀，如果出現(xiàn)相應(yīng)的版本號得滤，則說明安裝成功。
打開C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到
npm install webpack webpack-cli -g
全局安裝vue-cli咙俩，在cmd中輸入命令
npm install --global vue-cli
耐心等待安裝完成之后輸入 vue -V（注意這里是大寫的“V”）耿戚，如下圖，如果出現(xiàn)相應(yīng)的版本號阿趁，則說明安裝成功膜蛔。
[圖片上傳中...(image-8a78fa-1555513528581-0)]
打開C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到
打開node_modules也可以看到：
4.用vue-cli來構(gòu)建項(xiàng)目
首先在D盤新建一個(gè)VueStudy作為項(xiàng)目存放地，然后使用命令行cd進(jìn)入到項(xiàng)目目錄脖阵，輸入
vue init webpack demo
需要選擇一些選項(xiàng)皂股，會(huì)跳出幾個(gè)選項(xiàng)讓你回答：
Project name (demo)： -----項(xiàng)目名稱，直接回車命黔，按照括號中默認(rèn)名字（注意這里的名字不能有大寫字母）
Project description (A Vue.js project)： ----項(xiàng)目描述呜呐，也可直接點(diǎn)擊回車，使用默認(rèn)名字
Author ()： ----作者悍募，輸入你的大名
接下來會(huì)讓用戶選擇：Runtime + Compiler: recommended for most users 運(yùn)行加編譯蘑辑，既然已經(jīng)說了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運(yùn)行時(shí)坠宴，已經(jīng)有推薦了就選擇第一個(gè)了
Install vue-router? (Y/n) 是否安裝vue-router洋魂，這是官方的路由，大多數(shù)情況下都使用喜鼓。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼副砍，ESLint是個(gè)代碼風(fēng)格管理工具，是用來統(tǒng)一代碼風(fēng)格的庄岖。
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個(gè)ESLint預(yù)設(shè)豁翎，編寫vue項(xiàng)目時(shí)的代碼風(fēng)格
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試
-
image
配置完成后，進(jìn)入demo項(xiàng)目目錄隅忿，安裝依賴
npm install
完成后心剥，查看項(xiàng)目路徑下各個(gè)目錄含義
啟動(dòng)項(xiàng)目
npm run dev
如果瀏覽器打開之后，沒有加載出頁面背桐，有可能是本地的 8080 端口被占用优烧，需要修改一下配置文件 config里的index.js
如果瀏覽器打開之后，沒有加載出頁面牢撼，有可能是本地的 8080 端口被占用匙隔，需要修改一下配置文件 config里的index.js
運(yùn)行成功（服務(wù)啟動(dòng)成功后瀏覽器會(huì)默認(rèn)打開一個(gè)“歡迎頁面”）
