vue使用vue cli腳手架建立vue專案

2021-09-03 02:22:29 字數 1788 閱讀 1659

一、準備工作

安裝完成後,在命令列工具繼續輸入,全域性安裝腳手架vue-cli

npm install -g vue-cli
npm install -g cnpm --registry=
然後再使用cnpm來安裝vue-cli

cnpm install -g vue-cli
安裝vue-cli後,使用命令vue -v,如果圖下所示,則安裝成功。

二、準備工作完成後,初始化專案

vue init webpack demo
如何安裝步驟完成初始化(中間會出現兩個2選一的選擇,都選第一就可以了)

project name (my-project) # 專案名稱(我的專案)

project description (a vue.js project) # 專案描述乙個vue.js 專案

author 作者(你的名字)

vue build (use arrow keys) # 選擇a(使用箭頭鍵)*注意:a和b字母是我自己新增的,用於區分,實際用箭頭選擇

(a)runtime + compiler: recommended for most users

(b)runtime-only: about 6kb lighter min+gzip, but templates (or any vue-specific html) are only allowed in .vue files - render functions are required elsewhere

install vue-router? (y/n) # 是否安裝vue路由,也就是以後是spa(但頁面應用需要的模組)

use eslint to lint your code? (y/n) # 使用 eslint 到你的**? (y [ yes ] / n [ no ])

pick an eslint preset (use arrow keys) # 選擇乙個預置eslint(使用箭頭鍵)

setup unit tests with karma + mocha? (y/n) # 設定單元測karma + mocha? (y/ n)

setup e2e tests with nightwatch? (y/n) # 設定端到端測試,nightwatch? (y/ n)

三、初始化工作完成後,實戰開始

npm install
再使用npm run dev啟動專案

npm run dev
啟動完成後台,在瀏覽器輸入http://localhost:8080/就可以訪問你的第乙個vue專案啦

學習vue推薦**

搭建VUE腳手架 vue cli

確保node.js和npm cnpm都安裝好的情況下,檢視命令 node v npm v cnpm v,有返回版本號即為安裝成功,npm和cnpm有乙個即可,cnpm是 映象的npm,相對npm更快更穩定,配置命令 npm install g cnpm registry 在用 vue.js 構建大型...

搭建Vue腳手架(vue cli)

1.安裝node.js 安裝完成之後,開啟命令列工具 win r,然後輸入cmd 輸入 node v,如下圖,如果出現相應的版本號,則說明安裝成功。c users 19565 node v v12.13.1 c users 19565 npm v 6.12.1 2.安裝webpack 開啟命令列工具...

Vue腳手架vue cli搭建

vue腳手架搭建流程 首先在node環境下使用npm或者cnpm進行vue腳手架搭建 1.安裝node環境 安裝成功後在命令列檢視node版本,如果有說明安裝成功。檢視node版本 node v 2.安裝vue腳手架工具vue cli大家在安裝node的時候,會自動安裝npm 可以先行檢視npm版本...