基于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)
