如何使用vue搭建腳手架，nodejs如何進行拉包處理，簡述如何基於webpack創建項目模板

重要的事要說三遍，比如我們搭建項目中的文件代表什麼含義，##關注查看搭建項目生成文件的含義基於vue搭建項目和基於webpack搭建項目的含義##點擊鏈接查看

1.首先我們要先進入nodejs官網下載nodejs程序包

—下載鏈接：官網鏈接

安裝nodejs之前簡單瞭解一下什麼是nodejs點擊查看

2.選擇自己熟悉的磁盤，建議安裝在除c盤之外的磁盤（便於管理，不易與本地系統文件混淆）

—在這裏我選擇安裝的是D盤（D:\node）並在node文件下新建一個Nodejs文件又來存儲nodejs程序）

3.配置nodejs的變量環境

–1.粘貼複製你安裝nodejs程序的文件夾

2.進入Windows系統

3.將粘貼的路徑複製到path目錄中

3.打開cmd命令行輸入node -v查看nodejs版本號,輸入npm -v 查看npm版本號

4.使用npm進行拉包，用於搭建vue腳手架便於項目開發

• 1.node > 8.9 Node版本必須要大於8.9，不然創建搭建vue項目會出現不可描述的意思

• 2.如果之前已經安裝過舊版本（非3.x）腳手架，需先卸載舊版本:

• 3.npm uninstall vue-cli -g 卸載舊版本

• 4.npm install -g@vue/cli 安裝腳手架，用於生成項目
  

• 5.npm install -g@vue/cli-service-global 快速原型開發 編譯.vue文件（常用與開發大型項目）
  
  查看vue-cli 版本: vue --version或Vue -V

後面的步驟跟之前拉取npm install -g@vue/cli 和npm install -g@vue/cli-service-global的過程一樣的，小博就不敘述了，複製粘貼代碼執行就OK

如果仍然需要使用舊版本的vue init功能,可以全局安裝一個橋接工具：
npm install -g @vue/cli-init 拉取舊版本

小博有上傳軟件你們可以點擊下載鏈接下載

使用的軟件是vistauo code
則需要安裝插件：Vetur

5.安裝完所有的依賴之後查看文件夾D:\node\Nodejs\node_modules@vue下有沒有成功安裝之前拉過的包文件夾

cli安裝的腳手架
cli-init腳手架初始化
cli-service-global腳手架快速開發原型項目

6.開始搭建我們的vue腳手架，##關注查看搭建項目生成文件的含義基於vue搭建項目和基於webpack搭建項目的含義##

##第一步在node下新建一個文件夾

##第二步在選中當前文件如何輸入cmd，回車之後成功進入命令行工具

##第三部成功進入命令行工具之後，輸入 vue create vue-app(創建項目vue-app(項目名自己可以另取別名))

注意成功啓動之後不能關閉窗口，只能最小化，不然在瀏覽器輸入端口號找不到我們搭建的項目

##第三步，在瀏覽器中輸入localhost：8080

##第四步查看我們的新建vue文件夾中有我們剛剛創建的項目則說明項目已經創建成功了

7.搭建完項目之後開始編輯我們的項目，這裏我使用的軟件爲vs code 還需要安裝插件Vetur 不然編寫vue文件無法進行高亮

##將我們搭建的項目拉入軟件vs code編輯器，需要獲取編輯器的點擊鏈接//download.csdn.net/download/NanQiao1716/12191874

##修改項目代碼之後，瀏覽器展示

8.如果我們不小心關掉命令行窗口，導致項目無法在瀏覽器中展示

~~第一步找到我們創建項目的目錄地址，如何在地址欄中輸入cmd

~~第二步在命令行輸入 npm run serve

~~第三步瀏覽器中打開命令行中提示的端口htpp://localhost:8080

9.重要的事要說三遍，比如我們搭建項目中的文件代表什麼含義，##關注查看搭建項目生成文件的含義基於vue搭建項目和基於webpack搭建項目的含義##

10.Vue一些常用命令：

• 1.安裝vue-cli
  npm install -g@vue/cli
  npm install -g@vue/cli-service-global

• 2.創建一個基於 webpack 模板的新項目(上面敘述是基於vue模板的)//步驟與上面的步驟一樣，不過運行命令有點不一樣了, 這裏小博簡單示範一下。
  執行命令 ： vue init webpack 項目名稱
  
  ~~運行npm run dev (窗口不小心關掉了查看##第8模塊##步驟一樣)找到文件所在，直接輸入cmd回車進入命令行工具之後在輸入npm run dev，而第8點重新啓動基於vue項目的執行命令爲nmp run serve
  
  ~~在瀏覽器中複製粘貼端口號
  

• 3.安裝需要開發依賴：
  利用bower 拉需要的包
  包管理工具，bower拉前端需要的依賴包 ，npm 拉後端需要的依賴包
  npm install bower - g將bower全局安裝

• 4.項目運行：
  npm run dev

• 5.安裝vue-resource插件（通過XMLHttpRequest或JSONP發起請求並處理響應 //get post請求）：
  npm install vue-resource --save

• 6.安裝路由插件：
  npm install vue-router --save

• 7.安裝element-ui:
  npm i element-ui -S
  (安裝好之後要記得在main.js中引入）

• 8.安裝axios
  npm install axios --save

• 9.安裝Echarts
  npm install echarts --save

• 10.如果想要終止終端（cmd）正在運行的命令，則ctrl +c

重要的事要說三遍，比如我們搭建項目中的文件代表什麼含義，##關注查看搭建項目生成文件的含義基於vue搭建項目和基於webpack搭建項目的含義##