天天看點

vue腳手架 項目搭建2.0 webpack 與 3.0 @vue/cli

1. vue項目搭建是基于node.js安裝成功後的。

node.js 下載下傳位址 : https://nodejs.org/en/

為了更好更快速的使用指令下載下傳,可以先裝全局 cnpm 亦是 淘寶鏡像

cnpm 可代替 npm

npm install -g cnpm –registry=https://registry.npm.taobao.org
           

2. (2.0 webpack) 腳手架

1》在指令視窗中 全局安裝 vue-cli 腳手架

cnpm install -g vue-cli 
           

安裝成功後可以建立新項目了

2》進入項目目錄,建立一個基于 webpack 模闆的新項目: vue init webpack 項目名

vue init webpack task
           

在這裡插入圖檔描述

vue腳手架 項目搭建2.0 webpack 與 3.0 @vue/cli

3》建立成功後進入建立項目, 輸入 npm run dev指令 運作項目

vue腳手架 項目搭建2.0 webpack 與 3.0 @vue/cli

運作成功可在浏覽器打開網址檢視效果

vue腳手架 項目搭建2.0 webpack 與 3.0 @vue/cli

3.(3.0 @vue/cli) 腳手架

1》如果沒有yarn,也可先安裝yarn

cnpm i yarn -g
           

2》在全局安裝腳手架

cnpm i @vue/cli -g
           

安裝成功後可以建立新項目了

3》

vue create 項目名字
           
vue腳手架 項目搭建2.0 webpack 與 3.0 @vue/cli

預設配置了一下簡單的配置然後直接安裝

自定義:

vue腳手架 項目搭建2.0 webpack 與 3.0 @vue/cli

上下箭頭為選擇上下項,按空格鍵進行選擇和取消

vue腳手架 項目搭建2.0 webpack 與 3.0 @vue/cli
vue腳手架 項目搭建2.0 webpack 與 3.0 @vue/cli
vue腳手架 項目搭建2.0 webpack 與 3.0 @vue/cli
vue腳手架 項目搭建2.0 webpack 與 3.0 @vue/cli

4》建立成功後進入建立項目,輸入 npm run server / yarn server 指令 運作項目

vue腳手架 項目搭建2.0 webpack 與 3.0 @vue/cli

3.最新版本會覆寫老版本,是以當兩種方式都想能夠使用,需要全局安裝一個橋接工具

npm install -g @vue/cli-init    //安裝完後 就還可以使用2.0 vue init webpack 指令
           
ww