diff --git "a/\350\203\241\346\260\270\345\230\211/2021-6-11(Vue\350\204\232\346\211\213\346\236\2662).md" "b/\350\203\241\346\260\270\345\230\211/2021-6-11(Vue\350\204\232\346\211\213\346\236\2662).md" new file mode 100644 index 0000000000000000000000000000000000000000..93930a3579a3cc9ae745e13351b888bd34571ff2 --- /dev/null +++ "b/\350\203\241\346\260\270\345\230\211/2021-6-11(Vue\350\204\232\346\211\213\346\236\2662).md" @@ -0,0 +1 @@ +# 紧接Vue脚手架 只不过今天是在Linux下安装脚手架，之前是在本地的Windows PowerShell上安装 \ No newline at end of file diff --git "a/\350\203\241\346\260\270\345\230\211/2021-6-12(Vue\345\215\225\347\273\204\344\273\266\345\274\225\347\224\250).md" "b/\350\203\241\346\260\270\345\230\211/2021-6-12(Vue\345\215\225\347\273\204\344\273\266\345\274\225\347\224\250).md" new file mode 100644 index 0000000000000000000000000000000000000000..eb885045faf7741f68e9a1b6a8d46a827c6195ba --- /dev/null +++ "b/\350\203\241\346\260\270\345\230\211/2021-6-12(Vue\345\215\225\347\273\204\344\273\266\345\274\225\347\224\250).md" @@ -0,0 +1,117 @@ +# 1.下载VueCli +# 连接淘宝镜像，加快下载速度 +``` +npm config set registry https://registry.npm.taobao.org +``` +# 下载VueCli，npm i -g @vue/cli yarn ,@vue/cli 和 yarn一起下载 +``` +npm i -g @vue/cli yarn +``` +# 下载完以后创建项目； + + +## 到文件夹中使用vscode打开创建的项目 +### 点击src文件夹下的App.vue,会跳出要我们安装扩展，安装 + +### 打开App.vue文件 +``` + + + + + +``` +![](./img/2021-06-012_1.png) + +## 试着新建一个.vue为后缀的文件名 +### 然后该文件由三个部分组成 +``` + + + + + + + + +``` +## 然后要在App.vue引入该文件(test.vue) +``` +import Test from './components/test.vue' //引入 +``` \ No newline at end of file diff --git "a/\350\203\241\346\260\270\345\230\211/2021-6-8(\347\273\204\344\273\2661).md" "b/\350\203\241\346\260\270\345\230\211/2021-6-8(\347\273\204\344\273\2661).md" new file mode 100644 index 0000000000000000000000000000000000000000..82722f7e125e874b64d89d74727dbe2edf99b240 --- /dev/null +++ "b/\350\203\241\346\260\270\345\230\211/2021-6-8(\347\273\204\344\273\2661).md" @@ -0,0 +1,93 @@ +# 组件基础 + +## 通过 Props 向子组件传递数据 + +### 父组件里面传值title="zzz" title2="aaa"； props: ['title', 'title2']可以获取多个值但是template:模板就得要一个父容器包容 +``` + + +
+ + +
+ + + + +``` + + +## v-for 循环多个值 +``` + + +
+ + +
+ + + + +``` diff --git "a/\350\203\241\346\260\270\345\230\211/2021-6-9(VueCli(\350\204\232\346\211\213\346\236\266)\345\256\211\350\243\205).md" "b/\350\203\241\346\260\270\345\230\211/2021-6-9(VueCli(\350\204\232\346\211\213\346\236\266)\345\256\211\350\243\205).md" new file mode 100644 index 0000000000000000000000000000000000000000..2970f79fc15789aa120eae8269f1cc67a886d75f --- /dev/null +++ "b/\350\203\241\346\260\270\345\230\211/2021-6-9(VueCli(\350\204\232\346\211\213\346\236\266)\345\256\211\350\243\205).md" @@ -0,0 +1,39 @@ +# VueCli(脚手架)安装 + +## 1. 去Vue官网安装Vuecli(Vue脚手架) +![](./img/2021-6-9-1.png) + +## 安装Vuecli命令 @vue/cli +``` +可以用yarn global add @vue/cli --- 推荐 +也可以用 npm i -global @vue/cli +``` +![](./img/2021-06-09_2.png) + +### 如果安装脚手架比较慢可以试试用淘宝镜像来安装 +``` +npm config set registry http://registry.npm.taobao.org/ +``` +![](./img/2021-06-09_3.png) + +## 完成安装以后一般要设置一下vue环境变量否则会报错 +![](./img/2021-06-09_4.png) + + +## 添加环境变量 +![](./img/2021-06-09_5.png) +### 添加的变量路径 +![](./img/2021-06-09_6.png) + +## 改为环境变量以后要重新启动Windows PowerShell + +## 然后可以进入D盘创建一个文件夹存储项目 +![](./img/2021-06-09_7.png) + +## 进入目标文件夹以后用 `yarn serve` 运行项目 +![](./img/2021-06-09_8.png) + +## 如果要部署到服务器上要先打包 打包代码 `yarn build` +![](./img/2021-06-09_9.png) + +# 部署上网页的话就和部署静态网站一样 \ No newline at end of file diff --git "a/\350\203\241\346\260\270\345\230\211/img/2021-06-09_2.png" "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_2.png" new file mode 100644 index 0000000000000000000000000000000000000000..65bb1720803922bb4cc9850fbc12c57629e375a3 Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_2.png" differ diff --git "a/\350\203\241\346\260\270\345\230\211/img/2021-06-09_3.png" "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_3.png" new file mode 100644 index 0000000000000000000000000000000000000000..1a75bd9b42399633d8b1a682c290c69fff24029e Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_3.png" differ diff --git "a/\350\203\241\346\260\270\345\230\211/img/2021-06-09_4.png" "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_4.png" new file mode 100644 index 0000000000000000000000000000000000000000..1007a61b288bbe9825e5d7c10ce539ab9c033a84 Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_4.png" differ diff --git "a/\350\203\241\346\260\270\345\230\211/img/2021-06-09_5.png" "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_5.png" new file mode 100644 index 0000000000000000000000000000000000000000..b708ccea9cab5b471fda3086e1082c78949c81aa Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_5.png" differ diff --git "a/\350\203\241\346\260\270\345\230\211/img/2021-06-09_6.png" "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_6.png" new file mode 100644 index 0000000000000000000000000000000000000000..21c5bea4e82fe613b5fb8f5bea23bb4227664acc Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_6.png" differ diff --git "a/\350\203\241\346\260\270\345\230\211/img/2021-06-09_7.png" "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_7.png" new file mode 100644 index 0000000000000000000000000000000000000000..30ae6526febfc74b8c7f56a0771b30fea105c130 Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_7.png" differ diff --git "a/\350\203\241\346\260\270\345\230\211/img/2021-06-09_8.png" "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_8.png" new file mode 100644 index 0000000000000000000000000000000000000000..982f49410ce0e1467f0c5005205c639a07c9c880 Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_8.png" differ diff --git "a/\350\203\241\346\260\270\345\230\211/img/2021-06-09_9.png" "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_9.png" new file mode 100644 index 0000000000000000000000000000000000000000..679fcf55dbb1665eef2ae9b3b8f8eaad32ec2fb5 Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/2021-06-09_9.png" differ diff --git "a/\350\203\241\346\260\270\345\230\211/img/2021-06-12_1.png" "b/\350\203\241\346\260\270\345\230\211/img/2021-06-12_1.png" new file mode 100644 index 0000000000000000000000000000000000000000..061b33fac6b3dd4a89f2089497f8386672445979 Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/2021-06-12_1.png" differ diff --git "a/\350\203\241\346\260\270\345\230\211/img/2021-6-9-1.png" "b/\350\203\241\346\260\270\345\230\211/img/2021-6-9-1.png" new file mode 100644 index 0000000000000000000000000000000000000000..944e2a673a2f27b8dacf46d69d8ab02b03a1b0eb Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/2021-6-9-1.png" differ diff --git "a/\350\203\241\346\260\270\345\230\211/index.html" "b/\350\203\241\346\260\270\345\230\211/index.html" index 9effa765055ed3ffd46962b727237a6a270b43d3..24589aed6e29d9e225eb83eb8c263cb98d84d864 100644 --- "a/\350\203\241\346\260\270\345\230\211/index.html" +++ "b/\350\203\241\346\260\270\345\230\211/index.html" @@ -1,65 +1,37 @@ + - VueJs测试 + Vue练习 +
-
- {{item.name}} -
+
- - + + - + \ No newline at end of file