2020最新教你如何搭建vue項目


筆者工作也有一些時間,需要用vue寫項目時也總是項目組長已經把項目搭建好了,

偶爾心血來潮想試着自己搭建一個vue項目

 

我們搭建vue項目呢主要是用到了vue-cli來搭建,但是前提是必須要已經安裝好了node和npm

如果你還沒安裝這些東西,就先去安裝再來學習搭建vue項目吧

一、安裝vue-cli

1. 開啟命令行,輸入指令(Windows的命令行開啟方法為  鍵盤上的 開始鍵 + R 同時按下,然后輸入 cmd 就能打開命令行了)

npm install --global vue-cli  (--global全局安裝)

那如果安裝好了我們怎么查看的到是否已經安裝好了呢?

其實已經在我們本地了

本地路徑為  C:\Users\Administrator\AppData\Roaming\npm 

里面的文件大概長這個樣子

那么vue-cli我們就安裝好了

關於舊版本

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x),你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台電腦中管理多個 Node 版本。

可以使用下列任一命令安裝這個新的包:

npm install -g @vue/cli # OR yarn global add @vue/cli

安裝之后,你就可以在命令行中訪問 vue 命令。你可以通過簡單運行 vue,看看是否展示出了一份所有可用命令的幫助信息,來驗證它是否安裝成功。

你還可以用這個命令來檢查其版本是否正確:

vue --version

二、創建自己的項目

1. 隨便找一個文件夾(這里我以桌面 test文件夾 為例)

在cmd中進入到該文件夾

我這里呢  使用的進入命令(cd)  一步一步進入到桌面test文件夾的

你也可以在命令行中  拖入文件夾   這樣就可以直接進入到該文件夾

然后輸入命令

vue init webpack vue項目   (“vue項目” 是我項目的名稱,你也可以換一個名稱)

之后呢,cmd就會對你提問,我直接把回答好的圖放出來吧

 

 

 

等待它下載完成,就好了

 

 

我們就可以去到文件夾里面查看項目了

 

 

 

之后我們的運行指令是

npm run dev

一個簡單的vue項目就搭建好了

注意一個細節,安裝了舊版本記得用我上面教的先卸載

 收藏的一個關於創建vue,及開發vue項目到部署的全過程網址https://cli.vuejs.org/zh/guide/prototyping.html

https://www.jianshu.com/p/1ee1c410dc67


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM