筆者工作也有一些時間,需要用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
