vue專案開發流程附加模板

2021-09-19 05:49:55 字數 1624 閱讀 6627

工程目錄說明

本地開發

構建生產

開發注意

element-ui iview

nrm :乙個npm倉庫管理工具

npm常用命令

開啟cmd視窗,powershell(win10)視窗的快捷方式

用vue 結合element-ui ,iview設計的用於智慧型林業產品的前端開發庫,借鑑github部分**,也遇見許多為,積累了豐富經驗總結出這個vue的單頁面多級應用開發模板。

參考文獻:vue.js官網

單頁面的按需載入,(相關路由配置見頁面的roouter/inidex.js)

按需載入元件見componentpage頁面

使用者及組織機構管理

角色管理,許可權管理 。

訊息中心

使用者登入

404頁面 common/vue/404

403頁面 common/vue/403

換膚功能

v-dialog拖動指令common/js/directives

build 資料夾:

這個資料夾主要是進行webpack的一些配置,就我個人覺得啊~對我們最有用並且可能會使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三個webpack的配置檔案,分別是基本webpack配置、開發環境配置、生產環境配置。實際上這些檔案裡面的內容,一些簡單的配置都已經有了,包括入口檔案、外掛程式、loader、熱更新等都已經配置好了。我們要做的只是根據自己的專案有什麼loader需要增加的,比如生成環境需要加上uglifyjsplugin外掛程式等可以自行配置,或者一些外掛程式增加或者不需要的刪除,其實都是和業務相關了,其他的都可以不需要動。

config 資料夾:

這幾個配置檔案我覺得最主要的就是index.js 這個檔案進行配置**伺服器,這個地方和我們息息相關,和後台聯調就是在這裡設定乙個位址就可以了。開啟index.js 找到「proxytable「這個屬性,然後在裡面加上對應的後台位址即可,例如:

src資料夾:整個工程最具價值的資料夾,存放絕大部分的頁面**,,樣式的資料夾。

static 資料夾:

存放的檔案不會經過webpack處理,可以直接引用,例如swf檔案如果要引用可以在webpack配置對swf字尾名的檔案處理的loader,也可以直接將swf檔案放在這個資料夾引用

package.json:

這個檔案有兩部分是有用的:scripts 裡面設定命令,

例如設定了dev用於除錯則我們開發時輸入的是

npm run dev

例如設定了build 則是輸入npm run build用於打包;

另一部分是這裡可以看到我們需要的依賴包,

devdependencies:用於本地環境開發環境,這裡的包將不會被build。

dependencies:使用者發布環境。

轉至目錄

nrm是專門用來管理和快速切換私人配置的registry。當使用官方npm源安裝各種包比較慢的時候,建議修改npm源位址。公司有屬於自己的是有npm倉庫建議使用nrm

VUE專案開發流程

安裝npm 安裝webpack vue cli 2.9.6版本 版本不同可能會導致以下一些目錄結構以及錯誤解決辦法不符合實際情況 初始化建立專案,專案名稱 專案描述 擁有者等等資訊,d code self vue init webpack common component project name ...

vue開發流程

一.需求調研 確定需求 給雲笛課堂線下鋼琴培訓機構進行學生和老師的管理,以及排課。二.互動設計 邏輯設計 介面設計 三.實現 測試執行編輯器 vsconde 技術棧 vue cli cube ui vuex vue router axios es 6 vue專案開發流程及所需知識 四.線上部署上線準...

深圳Web培訓 Vue專案開發流程

深圳web培訓 vue專案開發流程 一 企業專案開發流程 產品提需求 互動設計出原型設計 視覺設計出ui設計圖 前端開發出頁面模板 server端訪問資料庫 驗收測試 二 為什麼要使用vue 5個前端,4個會vue,1個會react,那麼你該如何選擇 客戶要求使用vue 三 如何選擇腳手架 自己搭建...