Vue框架搭建項目時所用的vue官方項目模版，通過腳手架，下載vue項目，如何創建項目，認識項目結構和拉取項目模版。 ...
前言
本篇隨筆主要寫了Vue框架搭建項目時所用的vue官方項目模版，如何創建項目，建設項目結構和拉取項目模版。
作為自己對Vue框架搭建項目知識的總結與筆記。
百度網盤鏈接，案例源碼獲取地址：
鏈接：https://pan.baidu.com/s/1AB1gScU5SYtCgS3xnK3mIA?pwd=1234
提取碼：1234
隨筆目錄結構：
PS: 點擊標題後的 --> 
這個標誌可以瀏覽目錄結構，以便快速定位需要的內容
一、準備工作
1。開發工具
最主要的是Node 8.12.0 版本，版本衝突最少，當然最好是8.12.0 版本，其他版本也可以，不過需要調試錯誤。
這裡隨筆基於Node 8.12.0 版本，可以無衝突安裝，一路Next到最後運行。
1.1 VScode 任意版本即可
1.2 Node多版本管理工具gnvm （也可不裝）
此工具是管理Node版本的，方便開發，誰用誰爽，前端工程師都知道它
建議安裝，因為項目搭建需要更改node版本，以便與解決node和npm、webpack等工具的版本衝突，具體的安裝步驟請參考如下博文：
Node多版本管理工具gnvm的安裝：https://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html
1.3 Node 8.12.0 版本（未使用gnvm版本管理工具的，如有其他版本可能需要卸載掉，再安裝8.12.0版本）
（1）如果參考上一步驟下載了gnvm,並且安裝了Node 8.12.0 版本，可跳到下一步驟
Node多版本管理工具gnvm的安裝：https://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html
（2）如果未安裝Node多版本管理工具gnvm，可以直接從以下地址獲取（推薦安裝gnvm）：
百度網盤鏈接，node 8.12.0獲取地址：
鏈接：https://pan.baidu.com/s/1I_Cxy5MSc77UFv4Ne4-zaw?pwd=1234
提取碼：1234
2。案例分析
1.1 案例的src目錄結構如下圖所示。
二、搭建項目詳解
1 。目錄建設
在D盤目錄下創建文件夾D:vuecode\test(這是我所創建文件夾所在路徑 D:\allcode\classcode\vuecode\testcode\test1) 如下圖：
2 。安裝vue-cli2.9
1.1 查看是否已安裝2.9版本的vue
vscode打開新建目錄 打開終端 輸入以下命令
vue -V
1.2 如果版本不對，需要卸載重裝（當然，這裡只是要求版本和node匹配，其他工程可更改版本，創建項目過程類似）
輸入以下命令
npm uninstall vue-cli
1.3 卸載之後安裝2.9版本
輸入以下命令
npm install [email protected] -g
// -g 代表全局安裝
1.4 查看版本，檢查是否安裝成功
輸入以下命令
vue -V
3 。通過腳手架，下載vue項目模版
此時創建以 stuproject 為項目名的項目模版 輸入以下命令
vue init webpack stuproject
4 。互動式選項，具體選擇如下
- Project name 可以預設回車
- Project description 可以預設回車
- Author 可以預設回車
- Vue build runtime only 選擇runtime only
- Install vue-router? Yes
- Use ESLint to lint your code? No
- Set up unit tests No
- Setup e2e tests with Nightwatch? No
- use NPM 選擇NPM
5 。項目拉取成功
6 。查看目錄結構
7 。進入新下載的文件夾，切換目錄
輸入以下命令
cd stuproject
8 。運行項目
輸入以下命令
npm run dev
9 。瀏覽器查看
輸入以下命令
http://localhost:8080
10 。退出運行
終端 按兩次 ctrl + c 退出運行環境
11。 嘗試運行項目
百度雲盤案例源碼獲取鏈接（地址如下）：
鏈接：https://pan.baidu.com/s/1AB1gScU5SYtCgS3xnK3mIA?pwd=1234
提取碼：1234
將stuproject 項目下載後放到任意目錄下 使用vscode打開目錄 終端輸入以下命令
npm run dev
輸入以下命令 查看是否運行成功
http://localhost:8080
總結：
通過以上的學習，各位筆友應該能夠使用Vue框從官網拉取項目模版，創建新項目了。
碼字不易，認為樓主寫的還不錯，對你有幫助的話，請給個三連（關註、點贊、收藏）另外有問題可評論區留言討論。
後期會完善Vue進階語法的相關知識，有幫助的話，敬請關註樓主 持續更新中ing 。。。（不定時發文）
轉載時請註明出處鏈接
百度雲盤案例源碼獲取鏈接（地址如下）：
鏈接：https://pan.baidu.com/s/1AB1gScU5SYtCgS3xnK3mIA?pwd=1234
提取碼：1234
參考文檔：
1.vue官方文檔：Vue.js (vuejs.org)
其他隨筆推薦：
1. 十大排序演算法（Java實現）（作者力推）：https://www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html
2. Vue開發環境的部署：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-01.html
3. Vue基礎入門一：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-02.html
4. Vue基礎入門二：https://www.cnblogs.com/zbcxy506/p/note_1vue-03.html
5. Vue基礎知識思維導圖：https://www.cnblogs.com/zbcxy506/p/note_1vue-04.html
6.Vue動畫和過渡效果：https://www.cnblogs.com/zbcxy506/p/note_1vue-05.html
7.Vue框架中路由：https://www.cnblogs.com/zbcxy506/p/note_1vue-06.html
8.Node多版本管理工具GNVM：https://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html
9.用戶登錄註冊案例：https://www.cnblogs.com/zbcxy506/p/note_1vue-08.html
本文來自博客園，作者：智博程式園，轉載請註明原文鏈接，謝謝配合：https://www.cnblogs.com/zbcxy506/p/note_1vue-09.html
