摘要:導(dǎo)語(yǔ)下文實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)二該文章將從頭到尾梳理我是如何使用開(kāi)發(fā)一個(gè)后臺(tái)管理項(xiàng)目的,我會(huì)將自己遇到的問(wèn)題貼出,希望可以幫助到其他人。構(gòu)建項(xiàng)目框架準(zhǔn)備對(duì)于大陸用戶,建議將的注冊(cè)表源設(shè)置為國(guó)內(nèi)的鏡像,如淘寶鏡像,可以大幅提升安裝速度。
1. 導(dǎo)語(yǔ)
下文:Vue 2.x 實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)(二)
2. 開(kāi)發(fā)前須知該文章將從頭到尾梳理我是如何使用 Vue 2 開(kāi)發(fā)一個(gè)后臺(tái)管理項(xiàng)目的,我會(huì)將自己遇到的問(wèn)題貼出,希望可以幫助到其他人。
我的后臺(tái)管理系統(tǒng)項(xiàng)目運(yùn)用了如下框架/插件:
Vue 2.x —— 項(xiàng)目所使用的 js 框架,我所使用的版本是:2.1.10
vue-router 2 —— Vue 2.x 配套路由,我所使用的版本是:2.3.0
Element —— UI 框架,餓了么出品,我所使用的版本是:1.2.8
Echarts —— 圖表插件,百度出品,我所使用的版本是:3.4.0
在 UI 框架的選擇上,除了 Element,iView 也不錯(cuò),大家可以按需選擇。
對(duì)于所使用的框架/插件,盡可能先快速過(guò)一遍文檔,這樣可以知道有什么現(xiàn)成的東西可以使用,避免自己做多余的工作。
3. 構(gòu)建項(xiàng)目框架 準(zhǔn)備對(duì)于大陸用戶,建議將 npm 的注冊(cè)表源設(shè)置為國(guó)內(nèi)的鏡像,如 淘寶 NPM 鏡像,可以大幅提升安裝速度。
運(yùn)行如下語(yǔ)句即可使用淘寶鏡像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用方法為:將 npm 改為 cnpm
示例:npm install => cnpm install
根據(jù) 官方指南 執(zhí)行如下命令行語(yǔ)句:
# 安裝 vue $ cnpm install vue # 全局安裝 vue-cli,該工具提供開(kāi)箱即用的構(gòu)建工具配置 $ cnpm install --global vue-cli # 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目 my-project(項(xiàng)目名稱) $ vue init webpack my-project # 進(jìn)入項(xiàng)目目錄 $ cd my-project # 安裝依賴 $ cnpm install # 運(yùn)行項(xiàng)目(不需要使用到下載功能時(shí),沒(méi)有必要使用 cnpm) $ cnpm run dev # 或者(效果一樣) $ npm run dev
在 Use ESLint to lint your code? (Y/n) 這一項(xiàng),如果不打算使用語(yǔ)法檢測(cè),可以直接選擇 n,如果決定安裝但是又暫時(shí)不想啟用,后文有如何禁用的說(shuō)明。
這時(shí)你的瀏覽器會(huì)自動(dòng)打開(kāi) localhost:8080 頁(yè)面,說(shuō)明項(xiàng)目環(huán)境搭建成功,我們已經(jīng)有了一個(gè)基于 webpack 模板的項(xiàng)目框架。
可能遇到的問(wèn)題問(wèn)題:
運(yùn)行 npm run dev 后報(bào)錯(cuò):
To use this template, you must update following to modules: npm: 2.15.1 should be >= 3.0.0
遇到這個(gè)問(wèn)題說(shuō)明你的 nodejs 版本也不高,因此最好更新 node 版本及 npm 版本。
解決:
升級(jí) node 的話直接重新安裝一個(gè)新版本,安裝包 這里 下載。
升級(jí) npm 的話可以直接運(yùn)行命令行語(yǔ)句:
cnpm install npm@latest -g
參考:node 安裝及 npm 升級(jí)方法
項(xiàng)目結(jié)構(gòu)# 備注項(xiàng)為 webpack 模板內(nèi)置。
## 備注項(xiàng)為按照個(gè)人喜好新增的文件夾/文件。
. ├── build/ # webpack config files / webpack 配置文件 │ └── ... ├── config/ │ ├── index.js # main project config / 項(xiàng)目主要配置 │ └── ... ├── src/ # 主要的項(xiàng)目開(kāi)發(fā)文件都在這個(gè)目錄下: │ ├── main.js # app entry file / 應(yīng)用入口文件 │ ├── App.vue # main app component / App 父組件 │ ├── components/ # ui components / 可復(fù)用的 ui 組件 │ │ └── ... │ ├── assets/ # module assets (processed by webpack) / 模塊資源(經(jīng)過(guò) webpack 處理,如文件合并,圖片壓縮等) │ │ └── ... │ ├── page/ ## 以頁(yè)面為單位的 .vue 文件 │ │ ├── index.vue ## 一級(jí) router-view,頂部導(dǎo)航欄和左側(cè)側(cè)邊導(dǎo)航欄 │ │ ├── 404.vue ## 404 頁(yè)面 │ │ ├── menu1/ ## 二級(jí) router-view,導(dǎo)航切換后的頁(yè)面內(nèi)容 │ │ │ └── ... │ │ └── menu2/ ## 按照菜單項(xiàng)創(chuàng)建文件夾對(duì)文件進(jìn)行組織管理 │ │ └── ... │ └── router/ │ └── index.js # 路由配置文件 ├── static/ # pure static assets (directly copied) / 純靜態(tài)資源(直接拷貝使用,不經(jīng)過(guò) webpack 處理) ├── .babelrc # babel config ├── .eslintrc.js # eslint config ├── .editorconfig # editor config ├── index.html # index.html template ├── package.json # build scripts and dependencies └── ...
參考:webpack 模板項(xiàng)目結(jié)構(gòu)
相關(guān)文檔官網(wǎng)安裝指南
vue-cli
vuejs-templates: webpack
問(wèn)題:
當(dāng)你隨便寫(xiě)了一點(diǎn)代碼然后點(diǎn)擊保存后,瀏覽器中會(huì)顯示如下報(bào)錯(cuò)信息:
那是因?yàn)轫?xiàng)目默認(rèn)開(kāi)啟了 Eslint 功能,代碼編寫(xiě)不規(guī)范就會(huì)報(bào)錯(cuò)。
解決:
可以這樣禁用 Eslint:
build/webpack.base.conf.js
module: { rules: [ // { // test: /.(js|vue)$/, // loader: "eslint-loader", // enforce: "pre", // include: [resolve("src"), resolve("test")], // options: { // formatter: require("eslint-friendly-formatter") // } // }, { test: /.vue$/, loader: "vue-loader", options: vueLoaderConfig }, ... ] },
直接注釋掉相關(guān)規(guī)則就可以了。
Elementnpm 安裝 Element:
cnpm i element-ui -S
引入 Element:
官方文檔:引入 Element
可以完整引入也可以按需引入,為了項(xiàng)目的大小考慮,還是選擇按需引入比較好。
按照官方的使用說(shuō)明做,就能成功將 Element 引入項(xiàng)目,這里就不照搬文檔了。
在根據(jù)官方指南安裝了 babel-plugin-component 并修改了 .babelrc 文件后,針對(duì) 按需引入 的方式舉個(gè)例子:
#1 拷貝需要使用的組件代碼
下拉菜單 黃金糕 獅子頭 螺螄粉 雙皮奶 蚵仔煎
從上面的代碼段中可以看出,我們需要引入三個(gè)組件:el-dropdown,el-dropdown-menu 和 el-dropdown-item。
#2 引入組件
在 main.js 中寫(xiě)入以下內(nèi)容:
// 引入組件 import { Dropdown, DropdownMenu, DropdownItem } from "element-ui" // 使用駝峰方式書(shū)寫(xiě)組件名即可 // 使用組件 Vue.use(Dropdown) Vue.use(DropdownMenu) Vue.use(DropdownItem)
完整組件列表以 components.json 為準(zhǔn),也可以查看 項(xiàng)目地址 ode_moduleselement-uilib 目錄下的文件(文件名即組件名)。
Echarts參考文檔:在 webpack 中使用 ECharts
npm 安裝 ECharts:
cnpm install echarts --save
引入 ECharts:
全部引入:
var echarts = require("echarts"); // 默認(rèn)使用 require("echarts") 得到的是已經(jīng)加載了所有圖表和組件的 ECharts 包,因此體積會(huì)比較大 // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例 var myChart = echarts.init(document.getElementById("main")); // 繪制圖表 myChart.setOption({ ... });
按需引入:
echarts-line.vue(基于 echarts 的折線圖組件示例)
可以按需引入的模塊列表見(jiàn) https://github.com/ecomfe/ech...
jQuery有些人可能還無(wú)法離開(kāi) jQuery 的使用(例如我,不過(guò)建議是如果使用了 vue 進(jìn)行開(kāi)發(fā),就沒(méi)有必要使用 jQuery 了),并且也已經(jīng)習(xí)慣了使用 Ajax(目前官方推薦的異步請(qǐng)求庫(kù)為 Axios,vue-resource 已經(jīng)停止更新維護(hù))。
要想全局使用 jQuery 的話,可以這樣做:
#1 下載 jquery 文件
將 jquery 文件放于 static 目錄下,如:static/js/jquery-3.0.0.min.js
#2 webpack 配置文件
build/webpack.base.conf.js
... var webpack = require("webpack") // 1. 確保引入 webpack,后面會(huì)用到 module.exports = { ... resolve: { extensions: [".js", ".vue", ".json"], modules: [ resolve("src"), resolve("node_modules") ], alias: { "vue$": "vue/dist/vue.common.js", "src": resolve("src"), "assets": resolve("src/assets"), "components": resolve("src/components"), "jquery": path.resolve(__dirname, "../static/js/jquery-3.0.0.min.js") // 2. 定義別名和插件位置 } }, plugins: [ // 3. 配置全局使用 jquery new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", jquery: "jquery", "window.jQuery": "jquery" }) ] }相關(guān)文檔/文章:
ESLint
Element
ECharts
jquery 配置參考
Vue框架引入JS庫(kù)的正確姿勢(shì)
到此為主,所有準(zhǔn)備工作都做好了,可以盡情地開(kāi)發(fā)頁(yè)面內(nèi)容了。
如果對(duì) Vue 或 vue-router 的使用有所疑問(wèn),查看官方文檔基本就能將問(wèn)題解決了。
有空的時(shí)候我再將其他開(kāi)發(fā)過(guò)程中遇到的問(wèn)題整理出來(lái)。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/83177.html
摘要:導(dǎo)語(yǔ)承接上文實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)一在上一篇文章中,我詳細(xì)敘述了如何創(chuàng)建項(xiàng)目框架和引入各種后臺(tái)常用插件,做好這些準(zhǔn)備工作后,我們就可以著手進(jìn)行頁(yè)面的開(kāi)發(fā)了。如果傳入的數(shù)據(jù)不符合規(guī)格,會(huì)發(fā)出警告。 1. 導(dǎo)語(yǔ) 承接上文:Vue 2.x 實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)(一) 在上一篇文章中,我詳細(xì)敘述了如何創(chuàng)建項(xiàng)目框架和引入各種后臺(tái)常用插件,做好這些準(zhǔn)備工作后,我們就可以著手進(jìn)行頁(yè)面的開(kāi)發(fā)了。在開(kāi)...
摘要:前言月份開(kāi)始出沒(méi)社區(qū),現(xiàn)在差不多月了,按照工作的說(shuō)法,就是差不多過(guò)了三個(gè)月的試用期,準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō),差不多到了轉(zhuǎn)正的時(shí)候,會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客,博文推薦分享給大家。 1.前言 6月份開(kāi)始出沒(méi)社區(qū),現(xiàn)在差不多9月了,按照工作的說(shuō)法,就是差不多過(guò)了三個(gè)月的試用期,準(zhǔn)備轉(zhuǎn)正了!一般來(lái)說(shuō),差不多到了轉(zhuǎn)正的時(shí)候,會(huì)進(jìn)行總結(jié)或者分享會(huì)議!那么今天我就...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累,以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址:http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...
閱讀 2703·2021-11-25 09:43
閱讀 2085·2021-11-24 09:39
閱讀 1954·2021-11-17 09:33
閱讀 2750·2021-09-27 14:11
閱讀 1840·2019-08-30 15:54
閱讀 3224·2019-08-26 18:27
閱讀 1264·2019-08-23 18:00
閱讀 1810·2019-08-23 17:53