1. 在IDEA中配置vue插件

點(diǎn)擊File-->Settings-->Plugins-->搜索vue.js插件進(jìn)行安裝。

image.png

安裝vue后，需要重啟軟件

image.png

2. 搭建node.js環(huán)境

安裝node.js 可以去官網(wǎng)下載：https://nodejs.org/zh-cn/

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

輸入

node --version

檢查Node.js版本

image.png

npm包管理器是集成在node中的，輸入npm -v 就會(huì)顯示npm版本信息.

image.png

node環(huán)境已經(jīng)安裝成功，由于有些npm有些資源被屏蔽或者是國(guó)外資源的原因，經(jīng)常會(huì)導(dǎo)致用npm安裝依賴包的時(shí)候失敗，所以還需要安裝npm的國(guó)內(nèi)鏡像：cnpm

3. 安裝cnpm

在命令行中輸入
npm install -g cnpm --registry=http://registry.npm.taobao.org
然后等待安裝，安裝完成之后，我們就可以用cnpm代替npm來安裝依賴包了。

image.png

安裝完畢

image.png

4. 安裝vue-cli腳手架構(gòu)建工具

在命令行中運(yùn)行命令cnpm install -g vue-cli,然后等待安裝完成，通過以上三步，我們的環(huán)境和工具都準(zhǔn)備好了，接下來就開始使用vue-cli來構(gòu)建項(xiàng)目。

image.png

5. 構(gòu)建運(yùn)行項(xiàng)目

image.png

運(yùn)行命令初始化的時(shí)候會(huì)讓用戶輸入幾個(gè)基本的選項(xiàng)，如項(xiàng)目名稱、描述、作者等信息，可以直接回車默認(rèn)就可以了。

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

運(yùn)行

image.png