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

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

安装 npm

参考手顺

安装结果

安装cnpm手顺  

 clone 下来 vue创造者的 demo版本 

gihub地址 ： 传送门

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

 下记是老师的图 

 运行个dev 

Ctrl +  C 停止 。。。。。。

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

=>  https://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 起始页 

srcApp.vue 

 srcrouterindex.js

照着about写组自己的

srcviews 

• 照着About.vue

•  写个自己的 Chin.vue

运行结果

传统写法 data methods

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

watch （注意引用）

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

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

vue的API

chin.vue 整体代码

 <template>   <div class="about">     <h1>HELLO CHIN SEI</h1>     <div>setup的count === {{count}}</div>     <div>data的count === {{countData}}</div>     <div>计算值属性的doubleCount === {{countDouble}}</div>     <button style="margin:20px;" @click="add" >多C多漂亮，C++(setup的count)</button>     <button style="margin:20px;" @click="addData" >多C多漂亮，C++(data的count)</button>   </div> </template>  <script type="text/javascript"> import { ref ,watch ,computed,getCurrentInstance} from 'vue'; export default{    data(){     return{       countData:0     }   },   methods:{     addData:function(){       this.countData++;     }   },    setup(){      const count = ref(0);     const add = function(){       count.value++;     };      const countDouble = computed(()=> count.value * 2);      const {ctx} = getCurrentInstance();     console.log(ctx);     console.log(ctx.$router);     console.log(ctx.$router.currentRoute.value);      watch(       ()=> count.value,val => {         console.log(`count is ${val}`)       }     );      return{       count,add,countDouble     }   } } </script> 

////////////////////////////////////////////////////////////////////////////////////华丽丽的分割线//////////////////////////////////////////////////////////////////////////////////////////

vuex

srcstoreindex.js

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

srcviewsChin.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);

输出结果

方法级的

srcstoreindex.js

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

srcviewsChin.vue  在这怎么使用。。。

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

另 div的一个小切替demo

（在about 页面做的）所以

srcviewsAbout.vue

 <template>   <div class="about">     <h1>This is an about page</h1>     <button @click="change">div 的切替</button>     <div class="myDiv" v-show='showFlg'></div>   </div> </template>  <script type="text/javascript"> import { ref } from 'vue'; export default{   setup(){      const showFlg = ref(true);     const change = function(){       showFlg.value = !showFlg.value;     };      return {       showFlg,change     }   } }  </script> <style type="text/css" scoped> .myDiv{   width:200px;   height:200px;   background:red; } </style> 

以上