基于Vue3+ElementUI-BootStrap4_前端实战
基于Vue3+ElementUI-BootStrap4_前端实战_实战笔记
1) 需求:技术参考
参考 |
vue cli 3 升级到 vue cli 4 方法步骤及升级点总结 |
|
vue/cli4的安装与使用 |
|
【vue】使用vue-cli4.0快速搭建一个项目 |
|
Vue基本原理 |
|
vue 原理 |
|
vue原理简介 |
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包管理器以及安装的一些配置
|
参考官方的站点 |
|
执行安装指令 |
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 常用的几个参数 |
参考 |
|
方法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\_mysql@2.18.1@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] sqlstring@2.3.1 installed at node_modules\_sqlstring@2.3.1@sqlstring [2/4] safe-buffer@5.1.2 installed at node_modules\_safe-buffer@5.1.2@safe-buffer [3/4] bignumber.js@9.0.0 installed at node_modules\_bignumber.js@9.0.0@bignumber.js [4/4] readable-stream@2.3.7 installed at node_modules\_readable-stream@2.3.7@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 区别
参考 |
|
在发布npm包的时候,本身dependencies下的模块会作为依赖,一起被下载;devDependencies下面的模块就不会自动下载了;但对于项目而言,npm install 会自动下载devDependencies和dependencies下面的模块。 |
|
|
参考 |
ESLint 使用简介 |
|
2002 年,Douglas Crockford (译注:《JavaScript 语言精粹》的作者)开发了可能是第一款针对 JavaScript 的语法检测工具 —— JSLint |
2013 年的 6 月份,Zakas 发布了全新的 lint 工具——ESLint[ |
|
browserslist详解 |
|
10) 需求:vue的整体目录结构
参考 |
vue-cli4项目搭建及目录简介 |
项目目录简介 |
|
|
dist:用于存放我们 使用 npm run build 命令打包的项目文件 |
|
进行打包的实战操作 |
npm run build
> vue454@0.1.0 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; |
参考 |
是否提供更多的提示信息 |
|
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的一些基本实用 |
|
参考 |
|
不适合场景:严谨性操作,如充话费,冲流量,存钱 |
适合场景:非严谨性操作,评论,抢购,发帖子,高并发 |
|
早期的版本4.0以前,不支持事务,同时容易发生数据丢失 |
|
事务:一个订火车票的操作,可能至少涉及2个操作,操作1:12306下订单;操作2:支付宝付款,这是2个企业的2个操作,肯定会被存储到2个表中。事务的定义是,如果1个事情涉及2个表,只有这2个表同时插入或删除或修改成功的情况下,才算成功,只要有一个表操作发生失败,则虽然有先前德一个表已经进行了更改,讲发生回退操作 |
|
4.0以后,优化了操作,同时可以支持事务。场景并没有太大的改变。 |
14) 需求:MongoDB的实用CRUD的操作
参考 |
|
MongoDB 概念解析 |
https://www.runoob.com/mongodb/mongodb-databases-documents-collections.html |
|
15) 需求:cnpm安装
参考 |
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 (主要参考) |
|
实现步骤 |
|
安装node |
已经安装好的软件的版本如下 |
C:\Users\Administrator>node -v v12.16.3
C:\Users\Administrator>npm -v 6.14.4
C:\Users\Administrator>cnpm -v cnpm@6.1.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js) npm@6.14.5 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js) node@12.16.3 (C:\me\nodejs\node.exe) npminstall@3.27.0 (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的安装 |
如果是 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\_@vue_cli@4.5.4@@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\_@types_ejs@2.7.0@@types\ejs [2/34] commander@^2.20.0 installed at node_modules\_commander@2.20.3@commander [3/34] @vue/cli-ui-addon-widgets@^4.5.4 installed at node_modules\_@vue_cli-ui-addon-widgets@4.5.4@@vue\cli-ui-addon-widgets [4/34] @vue/cli-ui-addon-webpack@^4.5.4 installed at node_modules\_@vue_cli-ui-addon-webpack@4.5.4@@vue\cli-ui-addon-webpack [5/34] deepmerge@^4.2.2 installed at node_modules\_deepmerge@4.2.2@deepmerge [6/34] debug@^4.1.0 installed at node_modules\_debug@4.1.1@debug [7/34] ejs@^2.7.1 installed at node_modules\_ejs@2.7.4@ejs [8/34] envinfo@^7.5.1 installed at node_modules\_envinfo@7.7.2@envinfo [9/34] cmd-shim@^3.0.3 installed at node_modules\_cmd-shim@3.0.3@cmd-shim [10/34] ini@^1.3.5 installed at node_modules\_ini@1.3.5@ini [11/34] import-global@^0.1.0 installed at node_modules\_import-global@0.1.0@import-global [12/34] boxen@^4.1.0 installed at node_modules\_boxen@4.2.0@boxen [13/34] isbinaryfile@^4.0.6 installed at node_modules\_isbinaryfile@4.0.6@isbinaryfile [14/34] fs-extra@^7.0.1 installed at node_modules\_fs-extra@7.0.1@fs-extra [15/34] javascript-stringify@^1.6.0 installed at node_modules\_javascript-stringify@1.6.0@javascript-stringify [16/34] lru-cache@^5.1.1 existed at node_modules\_lru-cache@5.1.1@lru-cache [17/34] leven@^3.1.0 installed at node_modules\_leven@3.1.0@leven [18/34] minimist@^1.2.5 existed at node_modules\_minimist@1.2.5@minimist [19/34] lodash.clonedeep@^4.5.0 installed at node_modules\_lodash.clonedeep@4.5.0@lodash.clonedeep [20/34] resolve@^1.17.0 existed at node_modules\_resolve@1.17.0@resolve [21/34] shortid@^2.2.15 installed at node_modules\_shortid@2.2.15@shortid [22/34] slash@^3.0.0 installed at node_modules\_slash@3.0.0@slash [23/34] js-yaml@^3.13.1 installed at node_modules\_js-yaml@3.14.0@js-yaml [24/34] recast@^0.18.8 installed at node_modules\_recast@0.18.10@recast [25/34] @vue/cli-shared-utils@^4.5.4 installed at node_modules\_@vue_cli-shared-utils@4.5.4@@vue\cli-shared-utils [26/34] download-git-repo@^3.0.2 installed at node_modules\_download-git-repo@3.0.2@download-git-repo [27/34] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name [28/34] yaml-front-matter@^3.4.1 installed at node_modules\_yaml-front-matter@3.4.1@yaml-front-matter [29/34] globby@^9.2.0 installed at node_modules\_globby@9.2.0@globby [30/34] vue@^2.6.11 installed at node_modules\_vue@2.6.11@vue [31/34] vue-codemod@^0.0.4 installed at node_modules\_vue-codemod@0.0.4@vue-codemod fsevents@1.2.13 download from binary mirror: {"host":"https://cdn.npm.taobao.org/dist/fsevents"} platform unsupported @vue/cli-ui@4.5.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@1.19.4 › chokidar@2.1.8 › 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\_inquirer@7.3.3@inquirer [33/34] @types/inquirer@^6.5.0 installed at node_modules\_@types_inquirer@6.5.0@@types\inquirer [34/34] @vue/cli-ui@^4.5.4 installed at node_modules\_@vue_cli-ui@4.5.4@@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\\_ejs@2.7.4@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/cli-ui@4.5.4 › apollo-server-express@2.16.1 › apollo-server-types@0.5.1 › apollo-engine-reporting-protobuf@0.5.2 › @apollo/protobufjs@^1.0.3 run "node scripts/postinstall", root: "C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\_@apollo_protobufjs@1.0.5@@apollo\\protobufjs" [2/4] scripts.postinstall @vue/cli-ui@4.5.4 › apollo-server-express@2.16.1 › apollo-server-types@0.5.1 › apollo-engine-reporting-protobuf@0.5.2 › @apollo/protobufjs@^1.0.3 finished in 420ms [3/4] scripts.postinstall @vue/cli-ui@4.5.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@^1.19.4 run "node bin/postinstall || exit 0", root: "C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\_nodemon@1.19.4@nodemon" Love nodemon? You can now support the project via the open collective: > https://opencollective.com/nodemon/donate
[3/4] scripts.postinstall @vue/cli-ui@4.5.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@^1.19.4 finished in 2s [4/4] scripts.postinstall @vue/cli-ui@4.5.4 › apollo-server-express@2.16.1 › apollo-server-core@2.16.1 › @apollographql/apollo-tools@0.4.8 › apollo-env@0.6.5 › 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\\_core-js@3.6.5@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/cli-ui@4.5.4 › apollo-server-express@2.16.1 › apollo-server-core@2.16.1 › @apollographql/apollo-tools@0.4.8 › apollo-env@0.6.5 › core-js@^3.0.1 finished in 522ms peerDependencies link vue@3.0.0-rc.6 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_@vue_compiler-sfc@3.0.0-rc.6@@vue\compiler-sfc unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\vue(2.6.11) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_graphql-type-json@0.3.2@graphql-type-json unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_graphql-subscriptions@1.1.0@graphql-subscriptions unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_graphql-tag@2.11.0@graphql-tag unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-server-types@0.5.1@apollo-server-types unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-server-express@2.16.1@apollo-server-express unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-server-plugin-base@0.9.1@apollo-server-plugin-base unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-server-errors@2.4.2@apollo-server-errors unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-cache-control@0.11.1@apollo-cache-control unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_subscriptions-transport-ws@0.9.18@subscriptions-transport-ws unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-tracing@0.11.1@apollo-tracing unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-engine-reporting@2.3.0@apollo-engine-reporting unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_graphql-tools@4.0.8@graphql-tools unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_graphql-extensions@0.12.4@graphql-extensions unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_graphql-upload@8.1.0@graphql-upload unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-graphql@0.5.0@apollo-graphql unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-server-core@2.16.1@apollo-server-core unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-link@1.2.14@apollo-link unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-utilities@1.3.4@apollo-utilities unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-link-http@1.5.17@apollo-link-http unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-link-http-common@0.2.16@apollo-link-http-common unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-link-persisted-queries@0.2.2@apollo-link-persisted-queries unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_graphql-anywhere@4.2.7@graphql-anywhere unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-cache-inmemory@1.6.6@apollo-cache-inmemory unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-client@2.6.10@apollo-client unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_@apollographql_graphql-language-service-interface@2.0.2@@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 graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_apollo-cache@1.3.5@apollo-cache unmet with C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\graphql(15.3.0) peerDependencies link graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_@apollographql_graphql-language-service-types@2.0.2@@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 graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_@apollographql_graphql-language-service-parser@2.0.2@@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 graphql@14.7.0 in C:\Users\Administrator\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_@apollographql_graphql-language-service-utils@2.0.2@@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/cli-shared-utils@4.5.4 › request@^2.88.2 request has been deprecated, see https://github.com/request/request/issues/3142 deprecate @vue/cli-shared-utils@4.5.4 › @hapi/joi@^15.0.1 This version has been deprecated and is no longer supported or maintained deprecate @vue/cli-shared-utils@4.5.4 › request@2.88.2 › har-validator@~5.1.3 this deprecate @vue/cli-shared-utils@4.5.4 › @hapi/joi@15.1.1 › @hapi/address@2.x.x This version has been deprecated and is no longer supported or maintained deprecate globby@9.2.0 › fast-glob@2.2.7 › micromatch@3.1.10 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › urix@^0.1.0 Please see https://github.com/lydell/urix#deprecated deprecate globby@9.2.0 › fast-glob@2.2.7 › micromatch@3.1.10 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › resolve-url@^0.2.1 https://github.com/lydell/resolve-url#deprecated deprecate @vue/cli-ui@4.5.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@1.19.4 › chokidar@^2.1.8 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. deprecate @vue/cli-ui@4.5.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@1.19.4 › chokidar@2.1.8 › 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: → vue-codemod@0.0.4 › vue@^3.0.0-beta.15(3.0.0-rc.6) (06:18:28) → vue-codemod@0.0.4 › @vue/compiler-sfc@^3.0.0-beta.15(3.0.0-rc.6) (06:17:57) → vue-codemod@0.0.4 › vue@3.0.0-rc.6 › @vue/shared@3.0.0-rc.6(3.0.0-rc.6) (06:18:23) → vue-codemod@0.0.4 › @vue/compiler-sfc@3.0.0-rc.6 › @vue/compiler-ssr@3.0.0-rc.6(3.0.0-rc.6) (06:18:01) → vue-codemod@0.0.4 › vue@3.0.0-rc.6 › @vue/compiler-dom@3.0.0-rc.6(3.0.0-rc.6) (06:17:52) → vue-codemod@0.0.4 › @vue/compiler-sfc@3.0.0-rc.6 › @vue/compiler-core@3.0.0-rc.6(3.0.0-rc.6) (06:17:47) → vue-codemod@0.0.4 › vue@3.0.0-rc.6 › @vue/runtime-dom@3.0.0-rc.6(3.0.0-rc.6) (06:18:14) → vue-codemod@0.0.4 › @babel/preset-env@7.11.0 › @babel/helper-compilation-targets@7.10.4 › browserslist@4.14.0 › electron-to-chromium@^1.3.523(1.3.539) (00:02:50) → vue-codemod@0.0.4 › vue@3.0.0-rc.6 › @vue/runtime-dom@3.0.0-rc.6 › @vue/runtime-core@3.0.0-rc.6(3.0.0-rc.6) (06:18:10) → vue-codemod@0.0.4 › vue@3.0.0-rc.6 › @vue/runtime-dom@3.0.0-rc.6 › @vue/runtime-core@3.0.0-rc.6 › @vue/reactivity@3.0.0-rc.6(3.0.0-rc.6) (06:18:05) 2020-08-19 → vue-codemod@0.0.4 › @babel/preset-env@7.11.0 › @babel/helper-compilation-targets@7.10.4 › browserslist@4.14.0 › 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/cli-ui@4.5.4 › apollo-server-express@2.16.1 › apollo-server-core@2.16.1 › @types/graphql-upload@8.0.3 › @types/koa@*(2.11.4) (14:40:16) 2020-08-17 → @types/inquirer@6.5.0 › @types/through@0.0.30 › @types/node@*(14.6.0) (22:34:03) → @vue/cli-ui@4.5.4 › apollo-server-express@2.16.1 › subscriptions-transport-ws@^0.9.16(0.9.18) (19:46:06) → @vue/cli-ui@4.5.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@1.19.4 › update-notifier@2.5.0 › configstore@^3.0.0(3.1.5) (03:19:39) 2020-08-16 → @vue/cli-ui@4.5.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@1.19.4 › update-notifier@2.5.0 › configstore@3.1.5 › dot-prop@^4.2.1(4.2.1) (19:13:03) 2020-08-15 → @vue/cli-shared-utils@4.5.4 › request@2.88.2 › har-validator@5.1.5 › ajv@^6.12.3(6.12.4) (17:07:56) 2020-08-14 → inquirer@7.3.3 › lodash@^4.17.19(4.17.20) (00:53:54) → @vue/cli-ui@4.5.4 › apollo-server-express@2.16.1 › apollo-server-types@0.5.1 › apollo-engine-reporting-protobuf@0.5.2 › @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/cli@4.5.4] 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来创建项目
参考 |
|
要重新开启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...
> yorkie@2.0.0 install D:\delete\vue454\node_modules\yorkie > node bin/install.js
setting up Git hooks done
> core-js@3.6.5 postinstall D:\delete\vue454\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}"
> ejs@2.7.4 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 项目实操(继续)
参考 |
|
继续相关的操作 |
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
> vue454@0.1.0 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. |
|
出现了相关的提示 |
|
还要继续参考,注意路由的部分 |
|
20) 需求:创建VUE项目,结合ELEMENTUI
参考 |
21) 需求:vue+elementui搭建后台管理界面(1登录)
参考 |
|
参考以上的内容,实现相关的技术 |
|
1)添加对应的页面 |
2)添加对应的路由 |
|
1) |
|
调整路由的配置 |
router/index.js中添加相关的内容 |
, { path: "/login", name: "Login", component: Login }, |
如果未来有人请求的地址是/login,路由的名字是Login,我将把对方的请求导航到Login的这个组件中 |
|
对页面进行简易的分析 |
|
|
整体的初步架构 |
|
|
以上的页面是由3个部分而构成,h5,js,css |
|
进行页面的拆解 |
参考 |
|
表单的标志位为 |
|
每一个表单必须由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) 需求:直接再页面上添加一个表格,方便我们进行访问
参考 |
在router/index.js中增加内容即可 |
23) 需求:axios的含义
参考 |
24) 需求:动态数据增加
参考 |
|
具体内容查看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有什么区别?
参考 |
|
components是小组件 containers是容器级组件 views是页面级组件
也就是说,views是页面级组件,components是小组件,小组件可被引用在views中,一般views组件不被复用【containers是容器级组件(根据项目大小决定是否使用)】
从组件大小级别区分 components - (containers)- views |
30) 需求:nodejs+express+mongodb实现一个简单的前后端交互
参考 |
|
复盘以上项目建立的过程 |
|
|
31) 需求:Nodejs Express 连接Mongodb
参考 |
NodeJS Express 连接Mongodb |
|
32) 需求:Node.js Express 框架
参考 |
|
33) 需求:express创建项目
参考 |
34) 需求:vue4的原理-组织架构-运行方式
|
35) 需求:ElementU的原理-组织架构-运行方式
|
36) 需求:bootStrap4的原理-组织架构-运行方式
|
37) 需求:更新到@vue/cli 4.1.1版本的前端开发前的准备
参考 |
38) 需求:vue4.x element-ui按需引入
参考 |
|
|
39)