Vue-cli 搭建項目詳情

一、安裝Node.js

1.1 官網進行下載：https://nodejs.org/zh-cn/ （推薦多數人下載的LTS版本）

下載完後，一直Next直到安裝完成即可。

1.2 查看是否安裝完成

以管理員權限打開控制命令行程序(CMD),輸入 node -v 以及 npm -v 檢查是否安裝成功。下爲成功圖：

二、安裝使用淘寶NPM 鏡像

2.1 安裝鏡像

國內使用npm的官方鏡像速度很慢，推薦使用淘寶的npm鏡像

鏈接：npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

三、項目構建初始化

3.1安裝vue-cli指令：cnpm install vue-cli -g ，安裝成功結果圖：

3.2 使用VS CODE搭建一個項目

首先，選擇新建好的文件夾

其次，輸入指令 vue init webpack 項目名稱；手動創建可以直接按4個回車進行下一步，

其中第一行默認爲上面指令賦予的項目名稱，第二行爲描述，第三行爲作者名可爲空，

接着都輸入n，拒絕自動生成。

3.3 啓動項目

指令：cnpm run dev，我這邊報錯了如下圖：

run : 無法將“run”項識別爲 cmdlet、函數、腳本文件或可運行程序的名稱。請檢查名稱的拼寫，    d
如果包括路徑，請確保路徑正確，然後再試一次。
所在位置 行:1 字符: 1
+ run dev
+ ~~~
    + CategoryInfo          : ObjectNotFound: (run:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

PS E:\IDEA\vuedemo1209> cnpm run dev
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path E:\IDEA\vuedemo1209\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'E:\IDEA\vuedemo1209\package.json'npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Lenovo\AppData\Roaming\npm-cache\_logs\2020-12-09T02_55_03_615Z-debug.log

查了問題有兩個：1.電腦的Windows Powershell權限修改一下：Set-ExecutionPolicy RemoteSigned 

                             2.json包沒有找到，要進入到你建的項目文件夾進行啓動

四、啓動成功, 複製地址到瀏覽器黏貼：http://localhost:8080

最後附一張：搭建完的項目文件具體介紹，以及VS CODE的裝插件