vue學習(一)專案搭建

2022-03-11 10:51:53 字數 1684 閱讀 6694

安裝cnpm

npm install -g cnpm --registry=
完成準備工作

1、開始安裝腳手架工具vue-cli

開啟cmd,輸入以下命令,在全域性安裝vue-cli

方式一   npm install --global vue-cli

方式二 cnpm install --global vue-cli

windows下:管理員進入cmd,進入指定資料夾,命令如下:

初始化專案,命令如下:

定位到專案資料夾

cd blogweb

npm i //安裝所以的依賴包

npm run dev

常見一些錯誤,一般都是依賴包沒安裝完,或者 eslint tests e2e選擇了yes

處理方式(提示缺少那個模組,就安裝那個模組就ok了):

npm i webpack-dev-server
專案安裝完成,執行專案。

cd blogweb

npm run dev

證明成功了!webpack 正在打包。

專案檔案描述

先配置如下專案結構,這個純屬看團隊或者個人的愛好,沒有強制性規範

├src

├static  一般不頻繁修改,壓縮過的檔案,我們可以直接放裡面,可減少打包的時間

├── css   樣式

├── font   字型

├── image    檔案,大專案可精確到模組

├── login   比如登陸

└── js  指令碼

表現層 

store/ - vuex 狀態管理 

router/ - 前端路由 

view/ - 各個業務頁面 

component/ - 通用元件 

業務層 

service/ - 處理服務端返回的資料(類似data format),例如 service 同時呼叫了不同的api,把不同的返回資料整合在一起在統一傳送到 store 中 

api 層 

api/ - 請求資料,mock資料,反向校驗後端api 

util 層 

util/ - 存放專案全域性的工具函式 

好,我們的第一步,已經順利完成了,下一步我們開始寫**。

vue cli入門(一) 專案搭建

vue cli作為一款mvvm框架語言 vue 的腳手架,整合了webpack環境及主要依賴,對於專案的搭建 打包 維護管理等都非常方便快捷。在開始專案之前,建議先熟悉vue.js基本語法。1.安裝node.js 檢驗是否安裝成功,在cmd輸入命令 node v,回車 及 npm v,回車,如出現下...

Vue cli入門(一) 專案搭建

vue cli入門 一 專案搭建 前言 vue cli是一款基於vue的專案腳手架工具,其整合了webpack環境和主要的依賴,對於我們的專案搭建 開發 打包 維護管理等都是非常的方便。主要內容 1 node.js安裝和配置環境 2 構建vue cli專案模板 安裝node.js本地環境 2 檢驗是...

vue 實戰筆記一專案準備

這是在網上找的乙個訂餐系統vue的實戰demo。下面是我在做這個專案時的筆記 一.專案準備 1.新建資料夾,用visual studio編輯器,開啟終端 ctrl 2.安裝腳手架工具 npm install vue cli g vue init webpack 安裝過程和基本專案結構貼圖 安裝過程中...