vue通過vue cli搭建專案

2021-09-29 03:19:20 字數 1416 閱讀 1994

vue入門通過腳手架搭建專案。

//檢查node版本

node -v

//檢查npm版本

npm -v

//如果版本過低 下面操作進行公升級

npm install -g npm

npm install -g cnpm -registry=

//檢查

cnpm -v

3.安裝vue。

//全域性安裝

cnpm install vue-cli -g

4.安裝webpack

//全域性安裝webpack

cnpm install -webpack -g

5.新建專案

//新建專案之前以免報錯先檢查。

vue -v(大寫) //如果沒有顯示vue版本,npm i vue-cli -g安裝

webpack -v(小寫) //如果需要重新安裝,就用 npm install webpack -g

//以上三個條件都滿足下面新建專案

vue init webpack -my-product

project name 直接預設回車

project description 直接預設

author 寫你自己的名字

use sass 根據需求來定

6.啟動專案

//專案新建完成後找到自己的my-product

cd my-product

//安裝專案依賴

npm install

//啟動專案

npm run dev

//專案打包

npm run build

//目錄結構

/build 構建指令碼目錄

/config 構建配置目錄

/dist 打包後生成的目錄

/node_modules 依賴包

/src 原始碼目錄

/assets 資源目錄( 圖示等)

/components 元件目錄(本專案可提取出共用的元件)

/router 路由目錄(處理跳轉等)

/styles 樣式目錄

/views 頁面目錄

/service 頁面請求目錄

/utils 工具類檔案

home.vue 頁面級元件(共用的一些頭部、底部、左側選單)

main.js 入口檔案

/static 靜態檔案目錄

/test 測試檔案目錄

.eslinetrc.js es靜態檢查目錄

.eslinetignore 配置不需要今天檢查目錄

index.html 入口頁面

packge.json 專案描述檔案

vue cli 搭建vue專案

安裝完成後,開啟命令列工具輸入命令node v,如果出現對應版本號,就說明安裝成功了。npm包管理器,是整合在node中的,所以,直接輸入npm v也會顯示出npm的版本資訊。由於npm的有些資源被牆,為了更快更穩定,所以我們需要切換到 的npm映象 cnpm。npm install g cnpm ...

vue cli搭建vue專案

生成依賴 命令 npm install 4.執行命令 npm run dev 5專案打包命令 npm run build 檢測node版本 node v 檢視npm安裝 npm v 解除安裝vue cli2 npm uninstall vue cli g 安裝vue cli3 npm install...

vue cli 搭建vue專案

前提搭建好nodejs環境 vue cli是vue.js的腳手架,用於自動生成vue.js webpack的專案模板,建立命令如下 vue init webpack 注1 為自己建立專案的名稱 注2 必須先安裝vue,vue cli,webpack,node等一些必要的環境 命令 npm insta...