vue開發項目詳細教程（第一篇 搭建環境篇）

　　最近換了新電腦，搭建vue開發環境碰到了不少坑，因為vue更新了webpack4.0版本，使用之前的方法搭建竟然不行了。好了廢話不多說，直接開始最新的搭建方法。

 

1.安裝node.js

　　首先要搭建vue的環境需要借助node.js的npm的包管理器，所以第一步就是安裝node.js和配置node.js環境，

安裝和配置教程請參考我寫的node安裝配置教程：https://www.cnblogs.com/hermit-gyqy/p/11731343.html

按教程走完之后再回到這里，繼續開始下一步。（已經安裝node.js配置好環境的忽略這一步，直接開始）

 

2.安裝vue-cli腳手架和webpack

　　首先win+R打開cmd, （裝了git的也可以使用git，使用方法一樣的），輸入命令行：

1. npm install -g vue-cli               全局安裝vue-cli

2.npm  install -g webpack          全局安裝webpack

3. npm install -g webpack-dev-server       安裝webpack的本地webserver

4. npm install -g --save-dev webpack-cli　　安裝webpack-cli

（當時在這里我就碰到一個大坑，因為在webpack4.0版本之前是不用安裝webpack-cli的，安裝webpack就已經帶有了，但是現在一定要裝這個才不會報錯）

 

安裝完成后分別輸入vue -V（注意，這里的 vue -V，這個V是大寫的） 和 webpack -v  回車 查看vue-cli和webpack 是否安裝成功（如果成功就會顯示版本號）。

3.創建你的vue項目

　　A.1 首先在CMD上切換盤符（就是把路徑切換到你的項目的盤，例如你的項目放在E盤），那么就輸入 E:  （注意要帶上冒號）然后回車，如下圖：

然后開始新建項目並初始化，輸入： vue init webpack vue_glht 注意，在這里的vue_glht 是我創建這個項目的文件夾，名字你們可以自己規定

　　B.1 如果你們已經有在文件管理器上創建了用來放項目的文件夾如下圖這樣





也可以這樣做： cd vueglht\vue-admin 回車，進到項目根目錄文件夾，然后再輸入：vue init webpack

A1和B1兩個方法的效果都是一樣的，只需要選擇其中一個方法操作就可以繼續下一步初始化項目了，不管你是選擇

A1和B1的方法，在輸入了vue init webpack 或 vue init webpack vue_glht（要注意這里的vue_glht是我的項目目錄，要注意將它修改成你的項目目錄） 命令行回車

之后都會進到一個初始化項目的界面，（這里的設置比較重要，因為我在這里也碰到坑）

? Generate project in current directory? (Y/n)   (這里是問你是不是要在當前目錄中生成項目？) 輸入Y

? Project name (vue-admin)　　　　　　　　　　　　這里是問你創建的項目是不是這個名字？　　直接回車就可以了

? Project description (A Vue.js project)　　　　　這里是項目說明，也是　　　　　　　　　　直接回車

? Authpr    　　　　　　　　　　　　　　　　　　　這里是叫你輸入作者的名字或信息          可以填一下，然后回車

然后會出現一大堆東西，不用管，直接回車，如下圖：



回車之后繼續操作：

? Install vue-router? (Y/n)　　　　　　　  這里是問你是不是要安裝vue-router（vue的路由） 輸入y

? Use ESLint to lint your code? (Y/n)  　　這里是問你是不是要使用ESLint來代替你的代碼？  輸入n

? Set up unit tests (Y/n)　　　　　　　　　這里是問你是否設置單元測試 　　　　　　　　　 輸入n

? Setup e2e tests with Nightwatch? (Y/n)   這里是問你是否使用Nightwatch設置e2e測試？   　輸入n

? Should we run `npm install` for you after the project has been created? (recom           
mended) (Use arrow keys)　　　　這里的意思是說： 項目創建后，我們應該為您運行`npm install`嗎？（使用上下箭頭鍵選擇）

> Yes, use NPM  　　　　　　　　是的，使用NPM  　　　　默認選中這個，直接回車就可以了
Yes, use Yarn　　　　　　　　　  是的，使用Yarn
No, I will handle that myself 　　　 不，我會自己處理　

   
  回車之后回安裝依賴，等待一會安裝完成之后你的項目結構里面會多出一個node_modules的文件夾，里面就是剛才安裝的所有依賴了，

接着在命令行中輸入 npm run dev 回車讓服務器跑起來，跑起來之后會出現如下這樣的界面：

在瀏覽器上輸入：localhost:8080就會進到如下圖的頁面，那么恭喜你，你的環境已經搭好了，可以開始着手寫項目了。

 

開發管理后台項目請看第二篇《第二篇  開發管理后台》 會持續更新，請等待。。。