vue項目開發流程附加模板

介紹

用vue 結合element-ui ,iview設計的用於智慧林業產品的前端開發庫，借鑑github部分代碼，也遇見許多爲，積累了豐富經驗總結出這個vue的單頁面多級應用開發模板。
參考文獻：vue.js官網

功能

1. 單頁面的按需加載，（相關路由配置見頁面的roouter/inidex.js）
2. 按需加載組件見ComponentPage頁面
3. 用戶及組織機構管理
4. 角色管理，權限管理 。
5. 消息中心
6. 用戶登錄
7. 404頁面 common/vue/404
8. 403頁面 common/vue/403
9. 換膚功能
10. v-dialog拖動指令common/js/directives

安裝步驟

github Demo地址

• github Demo地址
• svn check out // 把模板下載到本地 github Demo地址
  cd ComponentAdminFrame // 進入模板目錄
  npm install // 安裝項目依賴，等待安裝完成之後，安裝失敗可用 cnpm 或 yarn
  轉至目錄

工程目錄說明

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

2. config 文件夾：
   這幾個配置文件我覺得最主要的就是index.js 這個文件進行配置代理服務器，這個地方和我們息息相關，和後臺聯調就是在這裏設置一個地址就可以了。打開index.js 找到“proxyTable“這個屬性，然後在裏面加上對應的後臺地址即可，例如：

3. src文件夾：整個工程最具價值的文件夾，存放絕大部分的頁面代碼，圖片，樣式的文件夾。
   

   • “assets”: 共用的樣式、圖片

   • “components”: 業務代碼存放的地方，裏面分成多個組件存放，一個頁面是一個組件，一個頁面裏面還會包着很多組件

   • “router”: 設置路由

   • “App.vue”: vue文件入口界面

   • “main.js：對應App.vue 創建vue實例，也是入口文件，對應webpack.base.config.js裏的入口配置

4. static 文件夾：

   存放的文件不會經過webpack處理，可以直接引用，例如swf文件如果要引用可以在webpack配置對swf後綴名的文件處理的loader，也可以直接將swf文件放在這個文件夾引用

5. package.json:

   這個文件有兩部分是有用的：scripts 裏面設置命令，
   例如設置了dev用於調試則我們開發時輸入的是
   npm run dev；
   例如設置了build 則是輸入npm run build 用於打包;
   另一部分是這裏可以看到我們需要的依賴包,
   devDependencies：用於本地環境開發環境，這裏的包將不會被build。
   dependencies：用戶發佈環境。

   轉至目錄

本地開發

• npm run dev
• // 開啓服務器，瀏覽器訪問 http://localhost:7867

構建生產

• // 執行構建命令
  npm run build
• 並將ol.js， ol.css拷貝至dist文件夾下 (也可在./index.html中更改對應openlayers引用，按實際更改)
• 將dist文件夾放在服務器下即可訪問
  轉至目錄

開發注意

• main.js,router/index.js中有許多全局設置，請慎重按需修改
• 頁面代碼建議加上全局class避免樣式衝突
• 能使用已有方法的儘量使用common/js/common.js便於全局管理
• 獲取項目基本屬性儘可能用vuex （main.js中配置），同樣便於全局管理
  轉至目錄

element-ui iview

• element-ui官網
• iveiw

nrm ：一個npm倉庫管理工具

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

• nrm ls 查看nrm 配置
• nrm current 查看當前使用的是哪個源
• nrm add ** 添加npm源，如http://registry.test.org(隨便寫的)，起個別名叫 test
  nrm add test http://registry.test.org
• nrm use ** 切換源
• nrm del ** 刪除nrm配置
  轉至目錄

npm常用命令

• npm install package_name //安裝
• npm install package_name -g//全局安裝指定版本，項目中安裝得比較少，會在該電腦中安裝
• npm install package_name@version //項目安裝指定版本
• npm install package_name@version --save //安裝指定版本,並將包信息保存在package.json中，項目中一定加–save否則代碼+ 可能在別人那跑不了
• npm install package_name@version -dev//安裝指定版本在開發環境中，不會打包
• npm uninstall package_name //卸載
• npm update package_name //更新包
  轉至目錄

打開cmd窗口，powerShell（win10）窗口的快捷方式

• 在當前窗口地址欄鍵入cmd可進入對應cmd窗口 cd XX進入當前目錄某文件
• 按住shift，鼠標右擊文件夾，進入對應powershell窗口
• cd ../向上一級
  轉至目錄