基于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.            实现什么愿景
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
bootstrap 软件
C:\Users\Administrator\AppData\Roaming\npm\node_modules\mysql_tmp\_mysql@2.18.1@mysql
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
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:⽤于存放静态⽂
public/index.html：是⼀个模板⽂件，作⽤是⽣成项⽬的⼊⼝⽂件
webpack打包的js,css也会⾃动注⼊到该页⾯中。我们浏览器访问项⽬的时候就会默认打开⽣成好的index.html
src：我们存放各种vue⽂件的地⽅
解释以下的代码
import router from "./router";
vue项⽬main.js⽂件下import router from './router'默认导⼊router⽂件夹下index.js
参考
是否提供更多的提⽰信息
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的具体来源和版本号
gitignore:git上传需要忽略的⽂件格式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。