基于Vue3+ElementUI-BootStrap4_前端實戰_實戰筆記
1) 需求：技術參考
|
參考 |
|
vue cli 3 升級到 vue cli 4 方法步驟及升級點總結 |
|
https://blog.csdn.net/qq_39953537/article/details/102759821 |
|
|
|
vue/cli4的安裝與使用 |
|
https://blog.csdn.net/diwang_718/article/details/102912743 |
|
|
|
【vue】使用vue-cli4.0快速搭建一個專案 |
|
https://blog.csdn.net/liyunkun888/article/details/102738377 |
|
|
|
Vue基本原理 |
|
https://segmentfault.com/a/1190000018659584 |
|
|
|
vue 原理 |
|
https://zhuanlan.zhihu.com/p/150989417 |
|
|
|
vue原理簡介 |
|
https://www.cnblogs.com/tylerdonet/p/9893065.html |
2) 需求：作業線路圖
|
20200824 |
|
|
|
|
|
20200825 |
|
1）10：30分之前練習MongoDB的CRUD |
|
2) 11：00之前實作第一次的基于MongDB的集合(表)設計 |
|
|
|
線索唯一性 |
|
業務場景，技術場景，技術場景拆解必須一一對應，對應每個人 |
|
|
3) 需求：個人小組產品提交
|
1) 角色 a) 產品經理(核心) b) 專案經理 c) 開發成員 2) 產品名稱： 3) 產品業務場景： a) 業務場景1 b) 業務場景2 4) 產品技術場景： a) 技術場景1.1 i. 負責人 ii. 介紹 b) 技術場景1.2 c) 技術場景2.1 d) 技術場景2.2 5) 敏捷迭代開發 a) 第一迭代(交付時間?) i. 實作什么愿景 ii. 實作了哪些業務場景 iii. 技術場景1.1 b) |
6) 需求：工具統一
|
1) Navicat 15.0.17 |
|
2) Node C:\Users\Administrator>node -v v12.16.3
C:\Users\Administrator>npm -v 6.14.4 |
|
3) Vscode
|
|
4) |
7) 需求：Node場景
|
1) NPM包管理器，JS檔案，固定位置下載，版本可以進行指定的更新-cnpm install |
|
2) 實胖客戶端編程瘦客戶端 |
|
3) 單執行緒無阻塞的通常運行比較穩定的程式偽服務端程式，代理，排隊 |
|
4) …… |
8) 需求：NPM包管理器以及安裝的一些配置
|
|
|
參考官方的站點 |
|
https://www.npmjs.com/ |
|
|
|
執行安裝指令 |
|
cnpm install com.laozhang |
|
|
|
√ Installed 1 packages √ Linked 0 latest versions √ Run 0 scripts √ All packages installed (1 packages installed from npm registry, used 598ms(network 594ms), speed 1.1kB/s, json 1(336B), tarball 335B) |
|
|
|
以上的包可以被安裝上 |
|
|
|
cnpm install 常用的幾個引數 |
|
參考 |
|
https://www.cnblogs.com/danchaofan123/p/11805217.html |
|
|
|
方法1： |
|
cnpm install mongosee # 安裝模塊到專案目錄下 |
|
|
|
方法2 |
|
cnpm install mysql -g |
|
將不會在當前的路徑下產生，會放置到npm的組態檔所指定的路徑中 |
|
Downloading mysql to C:\Users\Administrator\AppData\Roaming\npm\node_modules\mysql_tmp Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\mysql_tmp\[email protected]@mysql to C:\Users\Administrator\AppData\Roaming\npm\node_modules\mysql Installing mysql's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\mysql/node_modules [1/4] [email protected] installed at node_modules\[email protected]@sqlstring [2/4] [email protected] installed at node_modules\[email protected]@safe-buffer [3/4] [email protected] installed at node_modules\[email protected]@bignumber.js [4/4] [email protected] installed at node_modules\[email protected]@readable-stream All packages installed (10 packages installed from npm registry, used 4s(network 4s), speed 49kB/s, json 10(16.86kB), tarball 159.36kB) |
|
|
|
方法3 |
|
npm install --save moduleName # --save 的意思是將模塊安裝到專案目錄下，并在package檔案的dependencies節點寫入依賴， |
|
|
|
cnpm install mysql –save |
|
目錄中會多一個package.json |
|
并且檔案內容如下 |
|
|
|
方法4 |
|
npm install --save-dev moduleName # --save-dev 的意思是將模塊安裝到專案目錄下，并在package檔案的devDependencies節點寫入依賴， |
|
|
|
cnpm install mysql --save-dev |
|
√ Installed 1 packages √ Linked 10 latest versions √ Run 0 scripts √ All packages installed (11 packages installed from npm registry, used 432ms(network 421ms), speed 51.63kB/s, json 11(21.74kB), tarball 0B) |
|
|
|
{ "devDependencies": { "mysql": "^2.18.1" } } |
9) 需求：dependencies 和 devDependencies 區別
|
參考 |
|
https://www.jianshu.com/p/de3f9a53d2a9 |
|
|
|
在發布npm包的時候，本身dependencies下的模塊會作為依賴，一起被下載；devDependencies下面的模塊就不會自動下載了；但對于專案而言，npm install 會自動下載devDependencies和dependencies下面的模塊， |
|
|
|
|
|
參考 |
|
ESLint 使用簡介 |
|
https://www.jianshu.com/p/933b6b6a84c9 |
|
|
|
2002 年，Douglas Crockford （譯注:《JavaScript 語言精粹》的作者）開發了可能是第一款針對 JavaScript 的語法檢測工具 —— JSLint |
|
2013 年的 6 月份，Zakas 發布了全新的 lint 工具——ESLint[ |
|
|
|
browserslist詳解 |
|
https://www.jianshu.com/p/d45a31c50711 |
|
|
10) 需求：vue的整體目錄結構
|
參考 |
|
vue-cli4專案搭建及目錄簡介 |
|
https://blog.csdn.net/Dalin0929/article/details/104530773 |
|
專案目錄簡介 |
|
|
|
|
|
dist:用于存放我們 使用 npm run build 命令打包的專案檔案 |
|
|
|
進行打包的實戰操作 |
|
npm run build
> [email protected] build D:\delete\vue454\element > vue-cli-service build
- Building for production...
WARNING Compiled with 5 warnings 9:39:12
Module Warning (from ./node_modules/eslint-loader/index.js):
D:\delete\vue454\element\src\App.vue 3:1 warning Insert `····` prettier/prettier 4:17 warning Insert `·` prettier/prettier 6:12 warning Insert `?` prettier/prettier
? 3 problems (0 errors, 3 warnings) 0 errors and 3 warnings potentially fixable with the `--fix` option. |
|
|
|
以上這個打包操作，一般在專案進行優化的時候，進行 |
|
…… |
|
經過相關的打包之后，產生了如下內容 |
|
File Size Gzipped
dist\js\chunk-vendors.1ff346f0.js 823.56 KiB 219.25 KiB dist\js\app.32c4947f.js 8.19 KiB 3.00 KiB dist\js\about.c7a77cee.js 0.44 KiB 0.31 KiB dist\css\chunk-vendors.c6d02872.css 204.41 KiB 32.79 KiB dist\css\app.1319459c.css 0.47 KiB 0.29 KiB |
|
|
|
以上的網站，一般會nginx，多網站的負載均衡 |
|
Docker |
|
|
|
node_modules:用于存放我們專案的各種依賴，比如axios等等，沒有moudles檔案，專案就沒法運行，可以使用 npm install進行專案依賴的安裝 |
|
|
|
public:用于存放靜態文 public/index.html:是一個模板檔案，作用是生成專案的入口檔案 |
|
|
|
webpack打包的js,css也會自動注入到該頁面中，我們瀏覽器訪問專案的時候就會默認打開生成好的index.html |
|
|
|
src:我們存放各種vue檔案的地方 |
|
|
|
解釋以下的代碼 |
|
import router from "./router"; |
|
vue專案main.js檔案下import router from './router'默認匯入router檔案夾下index.js |
|
|
|
Vue.config.productionTip = false; |
|
參考 |
|
https://blog.csdn.net/losedguest/article/details/86569293 |
|
是否提供更多的提示資訊 |
|
|
|
new Vue({ router, store, render: h => h(App) }).$mount("#app"); |
|
|
|
vue Render：h=>h(App) 決議 |
|
|
|
最后，也就是
{ render:function(creatElement){ return creatElemnt(App); } } |
|
|
|
src/assets:用于存放各種靜態檔案，如圖片 src/compnents：用于存放我們的公共組件，如 header、footer等 src/views：用于存放我們寫好的各種頁面，如login、main等 src/App.vue:主vue模塊 引入其他模塊，app.vue是專案的主組件，所有頁面都是在app.vue下切換的 src/main.js:入口檔案，主要作用是初始化vue實體，同時可以在此檔案中參考某些組件庫或者全域掛在一些變數 src/router.js:路由檔案，這個里邊可以理解為各個頁面的地址路徑，用于我們訪問，同時可以直接在里邊撰寫路由守衛 src/store.js：主要用于專案里邊的一些狀態的保存，state中保存狀態，mutations中寫用于修改state中的狀態，actions暫時沒實踐，不知道具體怎么使用 package.json:模塊基本資訊專案開發所需要模塊，版本，專案名稱 package-lock.json:是在 npm install時候生成一份檔案，用以記錄當前狀態下實際安裝的各個npm package的具體來源和版本號 babel.config.js:是一個工具鏈，主要用于在當前和較舊的瀏覽器或環境中將ECMAScript 2015+代碼轉換為JavaScript的向后兼容版本 gitignore:git上傳需要忽略的檔案格式 vue.config.js:保存vue配置的檔案，可以用于設定代理,打包配置等 |
|
|
11) 需求：啟動MongoDB，方便Navicat進行連接
|
|
|
未來Windows版本的軟體，一般不建議實用.exe版本，因為安裝后，會進行注冊表服務的實用，所以，建議是喲個綠色版 |
|
在解壓縮之后的檔案夾bin中，放置一個mongo.conf的檔案 |
|
與bin同檔案夾建立另外一個檔案夾，叫logs |
|
與bin同檔案夾建立另外一個檔案夾，叫data |
|
|
|
連接夾子下面選擇mongodb |
|
|
12) 需求：開發線路圖
|
技術線路圖 |
|
業務線路圖 |
|
|
|
技術線路圖 |
|
H5+vue(4.5.4)+ElementUI/Bootstrap3/4(UI) |
|
JSON(data) |
|
NodeJS(API)+Express(API) |
|
MongoDB(4.4)+Navicat |
|
|
|
業務線路圖 |
|
1）專案名稱（*1） |
|
2）業務場景（*N）什么是最重要的 |
|
3）根據業務場景要細節化(*N*N) |
|
4 |
|
|
|
迭代有幾次（3天）（5個迭代） |
|
|
|
每個迭代，我能看到什么內容？交付給我什么內容？ |
|
|
|
作業任務拆解 |
|
1）UI（*2）+API+Nosql->人員分工情況 |
|
2）每個人大約在每個階段完成什么？交付給我什么內容？ |
|
3）20200824必須mongodbOK,預習我下面的內容 |
|
|
|
20200825 |
|
1）h5+vue+elementui->admin |
|
2) h5+vue+bootstrap->guest |
|
3) nodejs+express+mongodb->API(CRUD) |
13) 需求：MongoDB的基本實用
|
|
|
參考 |
|
1）Navicat+MongoDB的連接OK |
|
2）MongDB的一些基本實用 |
|
|
|
參考 |
|
https://www.runoob.com/mongodb/mongodb-tutorial.html |
|
|
|
不適合場景：嚴謹性操作，如充話費，沖流量，存錢 |
|
適合場景：非嚴謹性操作，評論，搶購，發帖子，高并發 |
|
|
|
早期的版本4.0以前，不支持事務，同時容易發生資料丟失 |
|
|
|
事務：一個訂火車票的操作，可能至少涉及2個操作，操作1：12306下訂單；操作2：支付寶付款，這是2個企業的2個操作，肯定會被存盤到2個表中，事務的定義是，如果1個事情涉及2個表，只有這2個表同時插入或洗掉或修改成功的情況下，才算成功，只要有一個表操作發生失敗，則雖然有先前德一個表已經進行了更改，講發生回退操作 |
|
|
|
4.0以后，優化了操作，同時可以支持事務，場景并沒有太大的改變， |
14) 需求：MongoDB的實用CRUD的操作
|
參考 |
|
https://www.runoob.com/mongodb/mongodb-create-database.html |
|
|
|
MongoDB 概念決議 |
|
https://www.runoob.com/mongodb/mongodb-databases-documents-collections.html |
|
|
15) 需求：cnpm安裝
|
參考 |
|
https://www.runoob.com/nodejs/nodejs-npm.html |
|
npm install npm -g 使用淘寶鏡像的命令： npm install -g cnpm --registry=https://registry.npm.taobao.org
|
16) 需求：【vue】使用vue-cli4.0快速搭建一個專案
|
參考 |
|
https://blog.csdn.net/liyunkun888/article/details/102738377 （主要參考） |
|
https://blog.csdn.net/diwang_718/article/details/102912743 |
|
|
|
實作步驟 |
|
|
|
安裝node |
|
已經安裝好的軟體的版本如下 |
|
C:\Users\Administrator>node -v v12.16.3
C:\Users\Administrator>npm -v 6.14.4
C:\Users\Administrator>cnpm -v [email protected] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js) [email protected] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js) [email protected] (C:\me\nodejs\node.exe) [email protected] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js) prefix=C:\Users\Administrator\AppData\Roaming\npm win32 x64 10.0.17763 registry=https://r.npm.taobao.org |
|
|
|
以上的cnpm的安裝 |
|
https://www.runoob.com/nodejs/nodejs-npm.html |
|
如果是 Window 系統使用以下命令即可：
npm install cnpm -g 使用淘寶鏡像的命令： -g 表示全域的含義，表示當前的cnpm的內容會被安裝再系統指定的檔案夾中
npm install -g cnpm --registry=https://registry.npm.taobao.org |
|
|
|
在上述環境都OK的情況下，可以重新安裝 |
|
如果已經安裝了2.9.6的版本，要進行卸載 |
|
|
|
//首先查看是否已安裝過vul-cli vue -V //如是有的話，就用下面命令卸載(如果你拷貝我的命令，可能要注意-是否是中文狀態的-) npm uninstall vue-cli -g |
|
|
|
|
|
重新安裝，程序如下 |
|
C:\Users\Administrator>cnpm install -g @vue/cli Downloading @vue/cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli_tmp Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli_tmp\_@[email protected]@@vue\cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli Installing @vue/cli's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli/node_modules [1/34] @types/ejs@^2.7.0 installed at node_modules\_@[email protected]@@types\ejs [2/34] commander@^2.20.0 installed at node_modules\[email protected]@commander [3/34] @vue/cli-ui-addon-widgets@^4.5.4 installed at node_modules\_@[email protected]@@vue\cli-ui-addon-widgets [4/34] @vue/cli-ui-addon-webpack@^4.5.4 installed at node_modules\_@[email protected]@@vue\cli-ui-addon-webpack [5/34] deepmerge@^4.2.2 installed at node_modules\[email protected]@deepmerge [6/34] debug@^4.1.0 installed at node_modules\[email protected]@debug [7/34] ejs@^2.7.1 installed at node_modules\[email protected]@ejs [8/34] envinfo@^7.5.1 installed at node_modules\[email protected]@envinfo [9/34] cmd-shim@^3.0.3 installed at node_modules\[email protected]@cmd-shim [10/34] ini@^1.3.5 installed at node_modules\[email protected]@ini [11/34] import-global@^0.1.0 installed at node_modules\[email protected]@import-global [12/34] boxen@^4.1.0 installed at node_modules\[email protected]@boxen [13/34] isbinaryfile@^4.0.6 installed at node_modules\[email protected]@isbinaryfile [14/34] fs-extra@^7.0.1 installed at node_modules\[email protected]@fs-extra [15/34] javascript-stringify@^1.6.0 installed at node_modules\[email protected]@javascript-stringify [16/34] lru-cache@^5.1.1 existed at node_modules\[email protected]@lru-cache [17/34] leven@^3.1.0 installed at node_modules\[email protected]@leven [18/34] minimist@^1.2.5 existed at node_modules\[email protected]@minimist [19/34] lodash.clonedeep@^4.5.0 installed at node_modules\[email protected]@lodash.clonedeep [20/34] resolve@^1.17.0 existed at node_modules\[email protected]@resolve [21/34] shortid@^2.2.15 installed at node_modules\[email protected]@shortid [22/34] slash@^3.0.0 installed at node_modules\[email protected]@slash [23/34] js-yaml@^3.13.1 installed at node_modules\[email protected]@js-yaml [24/34] recast@^0.18.8 installed at node_modules\[email protected]@recast [25/34] @vue/cli-shared-utils@^4.5.4 installed at node_modules\_@[email protected]@@vue\cli-shared-utils [26/34] download-git-repo@^3.0.2 installed at node_modules\[email protected]@download-git-repo [27/34] validate-npm-package-name@^3.0.0 installed at node_modules\[email protected]@validate-npm-package-name [28/34] yaml-front-matter@^3.4.1 installed at node_modules\[email protected]@yaml-front-matter [29/34] globby@^9.2.0 installed at node_modules\[email protected]@globby [30/34] vue@^2.6.11 installed at node_modules\[email protected]@vue [31/34] vue-codemod@^0.0.4 installed at node_modules\[email protected]@vue-codemod [email protected] download from binary mirror: {"host":"https://cdn.npm.taobao.org/dist/fsevents"} platform unsupported @vue/[email protected] › [email protected] › [email protected] › [email protected] › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32) [fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32) [32/34] inquirer@^7.1.0 installed at node_modules\[email protected]@inquirer [33/34] @types/inquirer@^6.5.0 installed at node_modules\_@[email protected]@@types\inquirer [34/34] @vue/cli-ui@^4.5.4 installed at node_modules\_@[email protected]@@vue\cli-ui execute post install 4 scripts... [1/4] scripts.postinstall ejs@^2.7.1 run "node ./postinstall.js", root: "C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\[email protected]@ejs" Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
[1/4] scripts.postinstall ejs@^2.7.1 finished in 198ms [2/4] scripts.postinstall @vue/[email protected] › [email protected] › [email protected] › [email protected] › @apollo/protobufjs@^1.0.3 run "node scripts/postinstall", root: "C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\_@[email protected]@@apollo\\protobufjs" [2/4] scripts.postinstall @vue/[email protected] › [email protected] › [email protected] › [email protected] › @apollo/protobufjs@^1.0.3 finished in 420ms [3/4] scripts.postinstall @vue/[email protected] › [email protected] › nodemon@^1.19.4 run "node bin/postinstall || exit 0", root: "C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\[email protected]@nodemon" Love nodemon? You can now support the project via the open collective: > https://opencollective.com/nodemon/donate
[3/4] scripts.postinstall @vue/[email protected] › [email protected] › nodemon@^1.19.4 finished in 2s [4/4] scripts.postinstall @vue/[email protected] › [email protected] › [email protected] › @apollographql/[email protected] › [email protected] › core-js@^3.0.1 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\[email protected]@core-js" Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
[4/4] scripts.postinstall @vue/[email protected] › [email protected] › [email protected] › @apollographql/[email protected] › [email protected] › core-js@^3.0.1 finished in 522ms peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_@[email protected]@@vue\compiler-sfc unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\vue(2.6.11) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@graphql-type-json unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@graphql-subscriptions unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@graphql-tag unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-server-types unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-server-express unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-server-plugin-base unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-server-errors unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-cache-control unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@subscriptions-transport-ws unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-tracing unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-engine-reporting unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@graphql-tools unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@graphql-extensions unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@graphql-upload unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-graphql unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-server-core unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-link unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-utilities unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-link-http unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-link-http-common unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-link-persisted-queries unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@graphql-anywhere unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-cache-inmemory unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-client unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_@[email protected]@@apollographql\graphql-language-service-interface unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\[email protected]@apollo-cache unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_@[email protected]@@apollographql\graphql-language-service-types unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_@[email protected]@@apollographql\graphql-language-service-parser unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link [email protected] in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_@[email protected]@@apollographql\graphql-language-service-utils unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) deprecate @vue/[email protected] › request@^2.88.2 request has been deprecated, see https://github.com/request/request/issues/3142 deprecate @vue/[email protected] › @hapi/joi@^15.0.1 This version has been deprecated and is no longer supported or maintained deprecate @vue/[email protected] › [email protected] › har-validator@~5.1.3 this deprecate @vue/[email protected] › @hapi/[email protected] › @hapi/[email protected] This version has been deprecated and is no longer supported or maintained deprecate [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › urix@^0.1.0 Please see https://github.com/lydell/urix#deprecated deprecate [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › resolve-url@^0.2.1 https://github.com/lydell/resolve-url#deprecated deprecate @vue/[email protected] › [email protected] › [email protected] › chokidar@^2.1.8 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. deprecate @vue/[email protected] › [email protected] › [email protected] › [email protected] › fsevents@^1.2.7 fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. Recently updated (since 2020-08-13): 23 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\.recently_updates.txt) Today: → [email protected] › vue@^3.0.0-beta.15(3.0.0-rc.6) (06:18:28) → [email protected] › @vue/compiler-sfc@^3.0.0-beta.15(3.0.0-rc.6) (06:17:57) → [email protected] › [email protected] › @vue/[email protected](3.0.0-rc.6) (06:18:23) → [email protected] › @vue/[email protected] › @vue/[email protected](3.0.0-rc.6) (06:18:01) → [email protected] › [email protected] › @vue/[email protected](3.0.0-rc.6) (06:17:52) → [email protected] › @vue/[email protected] › @vue/[email protected](3.0.0-rc.6) (06:17:47) → [email protected] › [email protected] › @vue/[email protected](3.0.0-rc.6) (06:18:14) → [email protected] › @babel/[email protected] › @babel/[email protected] › [email protected] › electron-to-chromium@^1.3.523(1.3.539) (00:02:50) → [email protected] › [email protected] › @vue/[email protected] › @vue/[email protected](3.0.0-rc.6) (06:18:10) → [email protected] › [email protected] › @vue/[email protected] › @vue/[email protected] › @vue/[email protected](3.0.0-rc.6) (06:18:05) 2020-08-19 → [email protected] › @babel/[email protected] › @babel/[email protected] › [email protected] › caniuse-lite@^1.0.30001111(1.0.30001116) (04:33:04) 2020-08-18 → @vue/cli-shared-utils@^4.5.4(4.5.4) (10:12:49) → @vue/cli-ui-addon-widgets@^4.5.4(4.5.4) (10:12:50) → @vue/cli-ui-addon-webpack@^4.5.4(4.5.4) (10:12:50) → @vue/cli-ui@^4.5.4(4.5.4) (10:13:10) → @vue/[email protected] › [email protected] › [email protected] › @types/[email protected] › @types/koa@*(2.11.4) (14:40:16) 2020-08-17 → @types/[email protected] › @types/[email protected] › @types/node@*(14.6.0) (22:34:03) → @vue/[email protected] › [email protected] › subscriptions-transport-ws@^0.9.16(0.9.18) (19:46:06) → @vue/[email protected] › [email protected] › [email protected] › [email protected] › configstore@^3.0.0(3.1.5) (03:19:39) 2020-08-16 → @vue/[email protected] › [email protected] › [email protected] › [email protected] › [email protected] › dot-prop@^4.2.1(4.2.1) (19:13:03) 2020-08-15 → @vue/[email protected] › [email protected] › [email protected] › ajv@^6.12.3(6.12.4) (17:07:56) 2020-08-14 → [email protected] › lodash@^4.17.19(4.17.20) (00:53:54) → @vue/[email protected] › [email protected] › [email protected] › [email protected] › @apollo/protobufjs@^1.0.3(1.0.5) (13:35:04) All packages installed (1116 packages installed from npm registry, used 1m(network 57s), speed 720.77kB/s, json 953(2.63MB), tarball 37.51MB) [@vue/[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js |
|
|
|
測驗安裝的版本 |
|
C:\Users\Administrator>vue -V @vue/cli 4.5.4 |
|
|
|
以上專案結束后，只是表示我的vue4.5.4的腳手架已經安裝成功，但是專案還沒有創建 |
17) 需求：通過vue的腳手架來創建專案的思考方式
|
|
|
參考 |
|
有兩種方式的參考 |
|
方法1：實用命令列來進行創建 |
|
vue create vue454 |
|
|
|
方法2：實用UI的方式來進行創建 |
|
C:\test>vue -V @vue/cli 4.5.4
C:\test>vue ui ? Starting GUI... ? Ready on http://localhost:8000 |
|
通過以下的操作來創建專案 |
|
|
18) 需求：實用命令列基于vue/cli 4.5.4來創建專案
|
參考 |
|
https://blog.csdn.net/diwang_718/article/details/102912743 |
|
https://blog.csdn.net/liyunkun888/article/details/102738377 |
|
|
|
要重新開啟cmd |
|
|
|
D:\delete>vue create vue454 OK ? Your connection to the default npm registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? Yes
Vue CLI v4.5.4 ? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) > Manually select features OK |
|
|
|
基本配置如下 |
|
Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Choose Vue version (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex >(*) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing |
|
|
|
繼續后，選擇 |
|
Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processor s, Linter ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) > 2.x OK 3.x (Preview) |
|
|
|
繼續后，選擇 |
|
Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processor s, Linter ? Choose a version of Vue.js that you want to start the project with 2.x ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n OK |
|
|
|
繼續后，選擇 |
|
> Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus |
|
|
|
繼續后選擇 |
|
? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config > ESLint + Prettier |
|
|
|
|
|
繼續后，選擇 |
|
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit |
|
|
|
繼續后，選擇 |
|
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files > In package.json |
|
|
|
繼續后，選擇 |
|
? Save this as a preset for future projects? (y/N) |
|
|
|
開始創建程序 |
|
Vue CLI v4.5.4 ? Creating project in D:\delete\vue454. ? Initializing git repository... ?? Installing CLI plugins. This might take a while...
> [email protected] install D:\delete\vue454\node_modules\yorkie > node bin/install.js
setting up Git hooks done
> [email protected] postinstall D:\delete\vue454\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}"
> [email protected] postinstall D:\delete\vue454\node_modules\ejs > node ./postinstall.js
added 1241 packages from 919 contributors in 113.874s
50 packages are looking for funding run `npm fund` for details
? Invoking generators... ? Installing additional dependencies...
added 66 packages from 43 contributors in 41.327s
55 packages are looking for funding run `npm fund` for details
? Running completion hooks...
? Generating README.md...
? Successfully created project vue454. ? Get started with the following commands:
$ cd vue454 $ npm run serve
WARN Skipped git commit due to missing username and email in git config. You will need to perform the initial commit yourself. |
|
|
|
對當前的專案進行一個簡易的解釋 |
|
|
|
node_modules是我從網上拉取的一些第三方的js庫 |
|
public未來對外發布給別人的時候，需要放置的地方 |
|
Src是你進行vue開發的代碼的位置 |
|
babel.config.js是屬于協助babel組件進行翻譯，將vue的代碼翻譯成.js |
|
package.json是屬于專案打包實用，專案打包進行js混淆等 |
|
|
|
運行這個專案 |
|
D:\delete>cd vue454
D:\delete\vue454>npm run serve |
|
|
|
|
|
打開編輯工具查看當前對應的專案串列 |
|
|
|
|
|
也可以通過 |
|
vue ui的方式來進行瀏覽 |
19) 需求：vue-cli@4搭建 vue + element-ui 專案實操（繼續）
|
參考 |
|
https://blog.csdn.net/huzhenv5/article/details/104005994 |
|
|
|
繼續相關的操作 |
|
D:\delete\vue454\element>vue add element WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first. ? Still proceed? (y/N) |
|
選擇y |
|
|
|
? How do you want to import Element? (Use arrow keys) > Fully import Import on demand |
|
第一個 |
|
|
|
這是相關的選擇 |
|
? Successfully installed plugin: vue-cli-plugin-element
? How do you want to import Element? Fully import ? Do you wish to overwrite Element's SCSS variables? No ? Choose the locale you want to load zh-CN |
|
|
|
安裝成功后，執行 |
|
|
|
D:\delete\vue454\element>npm run serve
> [email protected] serve D:\delete\vue454\element > vue-cli-service serve
INFO Starting development server... |
|
|
|
DONE Compiled successfully in 9324ms 17:13:53
App running at: - Local: http://localhost:8080/ - Network: http://192.168.43.152:8080/
Note that the development build is not optimized. To create a production build, run npm run build. |
|
|
|
出現了相關的提示 |
|
|
|
還要繼續參考，注意路由的部分 |
|
https://www.freesion.com/article/6103285247/ |
|
|
20) 需求：創建VUE專案，結合ELEMENTUI
|
參考 |
|
https://www.freesion.com/article/6103285247/ |
21) 需求：vue+elementui搭建后臺管理界面(1登錄)
|
參考 |
|
https://www.cnblogs.com/wbjxxzx/p/9942648.html |
|
|
|
參考以上的內容，實作相關的技術 |
|
|
|
1）添加對應的頁面 |
|
2）添加對應的路由 |
|
|
|
1） |
|
|
|
調整路由的配置 |
|
router/index.js中添加相關的內容 |
|
, { path: "/login", name: "Login", component: Login }, |
|
如果未來有人請求的地址是/login,路由的名字是Login,我將把對方的請求導航到Login的這個組件中 |
|
|
|
對頁面進行簡易的分析 |
|
|
|
|
|
整體的初步架構 |
|
|
|
|
|
以上的頁面是由3個部分而構成，h5,js,css |
|
|
|
進行頁面的拆解 |
|
參考 |
|
https://element.eleme.cn/2.0/#/zh-CN/component/form |
|
|
|
表單的標志位為 |
|
|
|
每一個表單必須由el-form |
|
:model表示后端資料傳遞給哪個模型 |
|
:rules表示表單的校驗規則 |
|
|
|
在 Form 組件中，每一個表單域由一個 Form-Item 組件構成 |
|
每一個表單域的組成，是由 |
|
el-form-item而開頭 |
|
里面的輸入框 el-input |
|
v-model="ruleForm2.username" 表示資料模型系結 |
|
|
|
如果是一個按鈕行為 |
|
@click="handleSubmit" |
|
|
|
進入到腳本行為 |
|
|
|
分析當前的頁面-data |
|
logining: false, ruleForm2: { username: 'laozhang', password: '123456', }, rules2: { username: [{required: true, message: 'please enter your account', trigger: 'blur'}], password: [{required: true, message: 'enter your password', trigger: 'blur'}] }, checked: false |
|
表示初始化欄位，logining,ruleForm2:表示頁面上資料區域的值,rules2表示當前欄位的校驗規則 |
|
|
|
針對頁面代碼的操作 |
|
//頁面上控制元件方法 methods: { handleSubmit(){ this.$refs.ruleForm2.validate((valid) => { if(valid){ this.logining = true; if(this.ruleForm2.username === 'admin' && |
|
|
|
this.$refs.ruleForm2.validate 表示對頁面的是否滿足如非工等改由規則的校驗 |
|
|
|
if(valid){表示校驗通過 |
|
|
22) 需求：直接再頁面上添加一個表格，方便我們進行訪問
|
參考 |
|
https://element.eleme.cn/2.0/#/zh-CN/component/table |
|
在router/index.js中增加內容即可 |
23) 需求：axios的含義
|
參考 |
|
http://www.axios-js.com/ |
24) 需求：動態資料增加
|
參考 |
|
http://www.axios-js.com/ |
|
|
|
具體內容查看selectAll.vue |
25) 需求：我如何去實作一個資料的增加
|
|
//定義一個mongodb鏈接 MongoClient.connect('mongodb://localhost:27017/db0',{ useNewUrlParser: true },function (err,db) { console.log('test') }); |
|
|
var Schema = MongoClient.Schema; //創建一個Schema模型骨架，并且設定好user模版 var userSchema = new Schema({ firstName:{type:String}, lastName:{type:String} }); var User = MongoClient.model("User",userSchema); |
|
實作了一個增加 |
|
app.get('/insert',function (req,res) { //處理insert的請求
console.log('請求成功') console.log(req.query.first_name) var user_1 = new User({ firstName: req.query.first_name, lastName: req.query.last_name }); //存盤資料 user_1.save(function (err) { if(err){ res.end('Error'); return next(); } res.end() }); }); |
|
|
BBB. 如果是純命令列，vue create XXX |
|
|
<template> <el-row> <el-button>默認按鈕</el-button> <el-button type="primary" @click="click0">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">資訊按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險按鈕</el-button> </el-row> </template> |
|
KKK. Scripts |
|
|
PPP. @click="click0" |
|
|
RRR. 每次都通過axios發起相關的http操作 |
|
this.$http({ method: "get", 表示http的方法 url: "/api/insert?first_name=x1&last_name=x2", 請求的連接 data: { 資料既可以寫入到url中，也可以data中進行生命 name: "xiaoming", info: "12" } }); |
|
|
proxy: { //配置多個跨域 '/api': { // 過濾的api target: 'http://localhost:12345', // 要訪問的URL changeOrigin: true, // true，啟用跨域 pathRewrite:{ // 要轉發到的地址，根據需要也可不配置 '^/api':'' } } } |
|
XXX. 經過以上運行 |
|
YYY. 為了達到這個效果，實際啟動2個網站 |
|
ZZZ. 網站1：vue:8080 |
|
26) 需求：vue的插件安裝
|
參考 |
|
27) 需求：MongoDB的API實作
|
建立一個對應的檔案夾，放入jsExressMongodb.js即可 |
|
把mongodb的服務開啟 |
|
mongodb4.4\bin>mongod.exe -f mongo.conf |
|
|
|
在server的檔案夾子中執行以下的代碼 |
|
|
|
server>node jsExpressMongodb.js |
|
|
|
如果有not find moudle |
|
cnpm install mysql |
|
也即是說，缺少什么組件，安裝什么組件 |
|
|
28) 需求：vue+elementui搭建后臺管理界面(2首頁)
|
|
29) 需求：vue-cli 3.x 的 views 和 components有什么區別？
|
參考 |
|
https://blog.csdn.net/AI_U20/article/details/88531065 |
|
|
|
components是小組件 containers是容器級組件 views是頁面級組件
也就是說，views是頁面級組件，components是小組件，小組件可被參考在views中，一般views組件不被復用【containers是容器級組件（根據專案大小決定是否使用）】
從組件大小級別區分 components - （containers）- views |
30) 需求：nodejs+express+mongodb實作一個簡單的前后端互動
|
參考 |
|
https://www.jianshu.com/p/da258b818c92 |
|
|
|
復盤以上專案建立的程序 |
|
|
|
|
31) 需求：Nodejs Express 連接Mongodb
|
參考 |
|
NodeJS Express 連接Mongodb |
|
https://segmentfault.com/a/1190000008387379 |
|
|
32) 需求：Node.js Express 框架
|
參考 |
|
https://www.runoob.com/nodejs/nodejs-express-framework.html |
|
|
33) 需求：express創建專案
|
參考 |
|
https://www.jianshu.com/p/12d2fa0f66b3 |
34) 需求：vue4的原理-組織架構-運行方式
|
|
35) 需求：ElementU的原理-組織架構-運行方式
|
|
36) 需求：bootStrap4的原理-組織架構-運行方式
|
|
37) 需求：更新到@vue/cli 4.1.1版本的前端開發前的準備
|
參考 |
|
https://www.cnblogs.com/JJpeng/p/xiaokancode.html |
38) 需求：vue4.x element-ui按需引入
|
參考 |
|
https://www.jianshu.com/p/b75414dfbd02 |
|
|
|
|
39)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/75769.html
標籤：其他