第一個Vue-cli
**準備：**下載安裝好node.js（官網下載，傻瓜式安裝）
node -v //查看node版本
npm -v //查看npm版本
安裝淘寶鏡像（這里設定為全域）此安裝僅為加速而安裝
npm install cnpm -g #安裝淘寶鏡像
cnpm install vue-cli -g #安裝vue-cli端
vue list #檢測是否安裝成功
Vue-cli安裝及安裝效果檢測
開始第一個Vue-cli專案
問題：什么是Vue-cli？
vue-cli是官方提供的一個腳手架，用于快速生成一個vue的專案模板；
??預先定義好的目錄結構及基礎代碼，就好比咱們在創建Maven專案時可以選擇創建一個骨架專案，這個估計專案就是腳手架，我們的開發更加的快速；專案的功能
- 統一的目錄結構
- 本地除錯
- 熱部署
- 單元測驗
- 集成打包上線
- 使用cmd進入專案存放目錄
#創建一個Vue專案，我們隨便建立一個空的檔案夾在電腦上，
#E:\CodeSource\Idea_2019.3.3\Vue
#1、首先需要進入到對應的目錄 cd /d E:\CodeSource\Idea_2019.3.3\Vue
#2、這里的myvue是專案名稱，可以根據自己的需求起名
vue init webpack myvue
//創建一個webpack的vue，因為目前還有些瀏覽器使用ES5，所有要降級處理，所以使用webpack
**操作說明：**
? Project name myvue //專案名
? Project description A Vue.js project //專案描述
? Vue build standalone
? Install vue-router? No //是否初始化路由
? Use ESLint to lint your code? No //初始化代碼
? Set up unit tests No//建立測驗檔案
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no //是否使用npm install初始化你的專案
這個時候就已經創建好了
npm install
#初始化專案，安裝依賴，完畢之后生成 node_modules 檔案夾
遇到錯誤及解決
Error [ERR_STREAM_WRITE_AFTER_END]: write after end
對npm降級處理
npm i -g npm@5.6.0
Webpack
Webpack是一款模塊加載器兼打包工具，能把各種資源，如：js、JSX、ES6、圖片等都作為模塊來處理和使用
安裝
npm install webpck -g
npm install webpck-cli -g
查看版本
webpack -v
webpack-cli -v
WebPack 安裝出現 Cannot find module 'webpack-cli/package.json’的錯誤解決
**
當在控制臺輸入webpack的時候其實運行的是 node_modules\node_modules\webpack\bin\webpack.json這個檔案，他會根據是否安裝有webpack-cli或者是webpack-command進行處理，當沒有安裝其中之一就會告訴你需要下載webpack-cli,如果只有安裝webpack-cli就會利用require.resolve獲取webpack-cli/package.json的路徑，然后根據這個路徑加載模塊，我的設備的問題就是獲取這個檔案的路徑錯誤導致webpack命令執行失敗，由于不想把時間花在為什么獲取檔案路徑失敗原因
解決步驟如下：
- 進入檔案夾D:\NodeJs\ins\node_global\node_modules\node_modules\webpack\bin找到package.json
- 在152行，將pkgPath改為絕對路徑
- 路徑名為 D:\NodeJs\ins\node_global\node_modules\node_modules\webpack-cli\package.json
就可以成功執行了，
注意出現反斜杠的地方需要不全反斜杠
個人心得：NodeJs與Vue打交道時，很多錯誤都是自己對于Vue專案的構建程序不熟悉，以及webpack、vue-cli等安裝混亂導致，頭腦一定要清晰，每一步是干什么，為什么這樣做要一清二楚！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/159672.html
標籤：java
上一篇：Quartus Prime基本使用方法及仿真遇到的錯誤
下一篇：股市虧本根源之貪婪