初探Vue3.0魅力 - 李游Leo公开课（2020-4-22） 笔记

其他参考资料

B站 该教学视频资源   =》  传送门

李游Leo 老师的公开课 做的笔记

安装 npm

参考手顺

安装结果

 

 

安装cnpm手顺  

 

 clone 下来 vue创造者的 demo版本 

gihub地址 ： 传送门

依据 package.json 文件 ，cnpm i 下载 依赖 

 下记是老师的图 

 运行个dev 

Ctrl +  C 停止 。。。。。。

运行个 serve  我应该 再去学学 英语 。。。。。。

=>  http://localhost:5000/

 使用作者提供的小例子

=>  https://github.com/vuejs/vue-next#status-beta

here =>  https://github.com/vuejs/vue-next-webpack-preview

 小例子 运行 

vue 脚手架 （前面都是 浮云 ~~~） 

安装一下

npm install -g @vue/cli  

vue -V 

检查已经安装成功

创建项目

vue create vue-next-cli-demo 

（mac 是这个，但windows 并不是，没有窗口交互互动的，小坑坑~）
 解决办法

1.winpty vue.cmd create 你的工程名（你滴名纸）

    就和视频里面一样啦~~~

    创建工程需要一些自定义的设定 ，设定一下 。。。。。。

2.vue 2 =》 vue 3 需要升级一下

   vue add vue-next 

   windows  会问个问题 选择 y 就会开始升级

3.起服务   

   npm run serve

 终于看见这个画面了~~~

git 的工作终于告一段落了~~~

 

华丽丽的分割线//

可以开始 写一些 小demo 啦

home about 后面追加一个自己的小link

app.vue 是类似启动程序

web程序里的 index 起始页 

src\App.vue 

 src\router\index.js

照着about写组自己的

src\views 

• 照着About.vue

•  写个自己的 Chin.vue

运行结果

传统写法 data methods

vue3新增方法 setup，一定注意最后需要return，否则会报错。

watch （注意引用）

computed  （计算值属性，且注意引用）

getCurrentInstance  路由信息？？？ 没听清！！！反正是能取得好多好多东西！！！

vue的API

chin.vue 整体代码

 

华丽丽的分割线//

vuex

src\store\index.js

import Vuex from "vuex";

export default Vuex.createStore({
  state: {
    a:10,
    chin:{
      aa:20,
      bb:30
    }
  },
  mutations: {},
  actions: {},
  modules: {}
});

src\views\Chin.vue  在这怎么取。。。

    console.log(computed(()=>ctx.$store.state.a));
    const store_a = computed(()=>ctx.$store.state.a);
    console.log(computed(()=>ctx.$store.state.chin.aa.value));
    const store_chin_aa = computed(()=>ctx.$store.state.chin.aa);

输出结果

 

方法级的

src\store\index.js

  mutations: {
    setAdd(state){
      state.a++;
    },
    setAddCount(state,countA){
      state.a = state.a + countA;
    }
  },

src\views\Chin.vue  在这怎么使用。。。

    const add1 = ()=>{
      ctx.$store.commit('setAdd');
    };

    const add2 = ()=>{
      ctx.$store.commit('setAddCount',count.value);
    };

另 div的一个小切替demo

（在about 页面做的）所以

src\views\About.vue

以上