vue-cli手腳架的搭建步驟
首先，確定你的電腦上已經(jīng)安裝了nodejs，可以使用npm包管理器安裝環(huán)境，如果還沒有安裝node環(huán)境，可參考我的另外一篇博客中提到的關(guān)于node的安裝步驟 初識react之react+webpack+es6環(huán)境配置步驟整理 ，這里就不多說了。
vue3.0與vue2.0的區(qū)別：
3.0 新加入了 TypeScript 以及 PWA 的支持
部分命令發(fā)生了變化：
下載安裝 npm install -g vue@cli
刪除了vue list
創(chuàng)建項目 vue create
啟動項目 npm run serve
默認(rèn)項目目錄結(jié)構(gòu)也發(fā)生了變化：
移除了配置文件目錄，config 和 build 文件夾
移除了 static 文件夾，新增 public 文件夾，并且 index.html 移動到 public 中
在 src 文件夾中新增了 views 文件夾，用于分類 視圖組件 和 公共組件
-
1）打開cmd命令窗口，切換到你要新建項目的文件夾下，此時可使用node -v檢查node的版本，如果出現(xiàn)版本號則node已安裝。
node-v命令圖片 - 2）使用以下命令全局安裝vue-cli
// 安裝國內(nèi)淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 搭建腳手架
npm install -g @vue/cli-init
-
3）使用命令 vue init webpack vue-demo 搭建vue項目, “vue-demo” 是你的項目名稱
image.png -
4）配置需要安裝的vue環(huán)境
image.png -
5）以上步驟完成之后，項目目錄結(jié)構(gòu)如下圖所示，其中的src目錄下的文件，就是我們自己需要使用到的文件了。
image.png - 6)安裝依賴
cnpm install
- 7）執(zhí)行 npm run serve 命令，啟動項目 (vue3.0的啟動命令，vue3.0以下的是npm run dev)
+8)當(dāng)出現(xiàn)下圖時，說明項目啟動成功！
image.png
這時我們可以通過瀏覽器訪問鏈接 http://localhost:8080 來訪問項目了。這時頁面如下圖：
image.png
