├── ES6
    └── promise
    │   └── index.html
├── LICENSE
├── README.md
├── cnd
    ├── LocalStore
    │   └── IndexedDB
    │   │   ├── index.html
    │   │   ├── nf-indexedDB - 副本 (2).js
    │   │   ├── nf-indexedDB - 副本 (3).js
    │   │   ├── nf-indexedDB - 副本.js
    │   │   ├── nf-indexedDB.config.js
    │   │   ├── nf-indexedDB.js
    │   │   ├── 新建文本文档 (2).txt
    │   │   └── 新建文本文档.txt
    ├── Vue3Composition
    │   ├── index.html
    │   ├── public
    │   │   └── favicon.ico
    │   ├── reactive.html
    │   └── ref.html
    ├── caifumoni.html
    ├── init
    │   └── index.html
    ├── project-admin
    │   ├── README.md
    │   ├── index.html
    │   ├── public
    │   │   └── favicon.ico
    │   ├── src
    │   │   ├── app.js
    │   │   ├── components
    │   │   │   ├── public
    │   │   │   │   ├── navMenu.html
    │   │   │   │   ├── navMenu.js
    │   │   │   │   ├── nfButton.html
    │   │   │   │   ├── nfButton.js
    │   │   │   │   ├── nfFind.html
    │   │   │   │   ├── nfFind.js
    │   │   │   │   ├── nfForm.html
    │   │   │   │   ├── nfForm.js
    │   │   │   │   ├── nfGrid.html
    │   │   │   │   ├── nfGrid.js
    │   │   │   │   ├── nfPager.html
    │   │   │   │   ├── nfPager.js
    │   │   │   │   ├── nfTabs.html
    │   │   │   │   └── nfTabs.js
    │   │   │   ├── test.html
    │   │   │   └── test.js
    │   │   ├── main.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   ├── script
    │   │   │   └── appImport.js
    │   │   ├── store
    │   │   │   ├── actionManage.js
    │   │   │   ├── index.js
    │   │   │   ├── map.js
    │   │   │   └── mutation-types.js
    │   │   └── views
    │   │   │   ├── About.html
    │   │   │   ├── About.js
    │   │   │   ├── component.html
    │   │   │   ├── component.js
    │   │   │   ├── home.js
    │   │   │   ├── packList.html
    │   │   │   ├── packList.js
    │   │   │   ├── store.html
    │   │   │   └── store.js
    │   └── web.config
    ├── project-axios
    │   ├── README.md
    │   ├── a.html
    │   ├── index.html
    │   ├── json.aspx
    │   ├── public
    │   │   └── favicon.ico
    │   ├── src
    │   │   ├── app.js
    │   │   ├── component
    │   │   │   ├── HelloWorld.vue
    │   │   │   └── test.js
    │   │   ├── main.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   ├── store
    │   │   │   └── index.js
    │   │   └── views
    │   │   │   ├── component.js
    │   │   │   ├── home.js
    │   │   │   └── state.js
    │   ├── vuex.vue
    │   └── web.config
    ├── project-compositionapi
    │   ├── README.md
    │   ├── index.html
    │   ├── public
    │   │   └── favicon.ico
    │   ├── src
    │   │   ├── app.js
    │   │   ├── components
    │   │   │   ├── test.html
    │   │   │   └── test.js
    │   │   ├── main.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   ├── script
    │   │   │   ├── appImport.js
    │   │   │   ├── nf-indexedDB.config.js
    │   │   │   └── nf-indexedDB.js
    │   │   ├── store
    │   │   │   ├── index.js
    │   │   │   ├── map-form.js
    │   │   │   ├── map.js
    │   │   │   └── mutation-types.js
    │   │   └── views
    │   │   │   ├── component.html
    │   │   │   ├── component.js
    │   │   │   ├── home.js
    │   │   │   ├── look
    │   │   │       ├── index.html
    │   │   │       ├── index.js
    │   │   │       └── watch.js
    │   │   │   ├── reactive
    │   │   │       ├── check.html
    │   │   │       ├── check.js
    │   │   │       ├── index.html
    │   │   │       ├── index.js
    │   │   │       ├── let.html
    │   │   │       ├── let.js
    │   │   │       ├── markraw.js
    │   │   │       ├── person.js
    │   │   │       ├── proxy-reactive.js
    │   │   │       ├── proxy.js
    │   │   │       ├── reactive-shallow.js
    │   │   │       ├── reactive.js
    │   │   │       ├── readonly-shallow.js
    │   │   │       ├── readonly.js
    │   │   │       └── toraw.js
    │   │   │   ├── store.html
    │   │   │   └── store.js
    │   └── web.config
    ├── project-template
    │   ├── README.md
    │   ├── index.html
    │   ├── public
    │   │   └── favicon.ico
    │   ├── src
    │   │   ├── app.js
    │   │   ├── components
    │   │   │   ├── test.html
    │   │   │   └── test.js
    │   │   ├── main.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   ├── script
    │   │   │   └── appImport.js
    │   │   ├── store
    │   │   │   ├── index.js
    │   │   │   ├── map.js
    │   │   │   └── mutation-types.js
    │   │   └── views
    │   │   │   ├── About.html
    │   │   │   ├── About.js
    │   │   │   ├── component.html
    │   │   │   ├── component.js
    │   │   │   ├── home.js
    │   │   │   ├── store.html
    │   │   │   └── store.js
    │   └── web.config
    ├── project-vuex
    │   ├── README.md
    │   ├── a.html
    │   ├── demo.json
    │   ├── index.html
    │   ├── public
    │   │   └── favicon.ico
    │   ├── src
    │   │   ├── app.js
    │   │   ├── component
    │   │   │   ├── HelloWorld.vue
    │   │   │   ├── test.html
    │   │   │   └── test.js
    │   │   ├── main.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   ├── script
    │   │   │   ├── appImport.js
    │   │   │   └── myImport.js
    │   │   ├── store
    │   │   │   ├── index.js
    │   │   │   ├── map.js
    │   │   │   ├── map2.js
    │   │   │   ├── mutation-types.js
    │   │   │   └── user.js
    │   │   └── views
    │   │   │   ├── 01stateall.html
    │   │   │   ├── 01stateall.js
    │   │   │   ├── 02statemember.html
    │   │   │   ├── 02statemember.js
    │   │   │   ├── 03getter.html
    │   │   │   ├── 03getter.js
    │   │   │   ├── 04setter.html
    │   │   │   ├── 04setter.js
    │   │   │   ├── 05action.html
    │   │   │   ├── 05action.js
    │   │   │   ├── 06map.html
    │   │   │   ├── 06map.js
    │   │   │   ├── 06module.html
    │   │   │   ├── 06module.js
    │   │   │   └── home.js
    │   ├── vuex.vue
    │   └── web.config
    └── project
    │   ├── README.md
    │   ├── a.html
    │   ├── index.html
    │   ├── public
    │       └── favicon.ico
    │   ├── src
    │       ├── app.js
    │       ├── component
    │       │   ├── HelloWorld.vue
    │       │   └── test.js
    │       ├── main.js
    │       ├── router
    │       │   └── index.js
    │       ├── store
    │       │   └── index.js
    │       └── views
    │       │   ├── component.js
    │       │   ├── home.js
    │       │   └── state.js
    │   ├── vuex.vue
    │   └── web.config
└── web.config


/ES6/promise/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 |   <head>
  5 |     <meta charset="utf-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8 |     <title>permise的基本使用方法</title>
  9 |   </head>
 10 |   <body>
 11 |     <div id="app">
 12 |       演示一下promise的使用<br>
 13 |       <input type="button" value="单次访问" onclick="submit()"/><br>
 14 |       <input type="button" value="依次访问" onclick="submitStep()"/><br>
 15 |       <input type="button" value="一起访问" onclick="submitMore()"/><br>
 16 |       请按F12，查看结果。
 17 |     </div>
 18 |  
 19 |   <script type="text/javascript">
 20 |     // 定义一个演示用的函数
 21 |     /* 
 22 |     * 假装后后端申请数据
 23 |     */
 24 |     const mySend = (url, data) => {
 25 |       // 接收url 和data，向后端提交
 26 |       console.log('url-data:', url, data)
 27 |       // 定义一个实例
 28 |       const p = new Promise((resolve, reject)=>{
 29 |         // resolve，reject是形式参数，可以是任意写法，如(res, rej)
 30 |         // 默认第一个参数实现的是resolve功能；
 31 |         // 第二个参数实现的是reject功能。
 32 |         setTimeout(() => {
 33 |           console.log("假装访问了一下后端，并且获得了数据。")
 34 |           const data = {
 35 |             name: 'jyk',
 36 |             time: new Date().valueOf()
 37 |           }
 38 |           // 成功了，返回给调用者
 39 |           resolve(data) 
 40 |           console.log('resolve后的代码')
 41 |           // 不同于return, resolve()执行完成后后面的代码还会执行。
 42 |           // 失败的话，调用reject返回给调用者。
 43 |           // 如果 resolve 被调用了，那么 reject 就不会被调用了
 44 |           reject('失败了')
 45 |         }, 500)
 46 |         
 47 |       })
 48 |       return p
 49 |     }
 50 | 
 51 |     const mySend2 = (url, data) => {
 52 |       // 接收url 和data，向后端提交
 53 |       console.log('url-data:', url, data)
 54 |       // 定义一个实例
 55 |       const p = new Promise((resolve, reject)=>{
 56 |         // resolve，reject是形式参数，可以是任意写法，如(res, rej)
 57 |         // 默认第一个参数实现的是resolve功能；
 58 |         // 第二个参数实现的是reject功能。
 59 |         console.log("假装访问了一下后端，并且获得了数据。")
 60 |         const data = {
 61 |           name: 'jyk',
 62 |           time: new Date().valueOf()
 63 |         }
 64 |         // 成功了，返回给调用者
 65 |         resolve(data) 
 66 |         console.log('resolve后的代码')
 67 |         // 不同于return, resolve()执行完成后后面的代码还会执行。
 68 |         // 失败的话，调用reject返回给调用者。
 69 |         // 如果 resolve 被调用了，那么 reject 就不会被调用了
 70 |         reject('失败了')
 71 |       })
 72 |       return p
 73 |     }
 74 | 
 75 |     // 单次访问演示
 76 |     const submit = () => {
 77 |       mySend('/api/person', {id: 122})
 78 |         .then((data) => {
 79 |           console.log('回调数据：', data)
 80 |         })
 81 |         .catch((error) => {
 82 |           console.log(error)
 83 |         })
 84 |     }
 85 | 
 86 |     // 依次访问
 87 |     const submitStep = () => {
 88 |       mySend('/api/person1', [1,2,3]).then((data) => {
 89 |         console.log('第一个返回：', data)
 90 |         return mySend('/api/person2', data) // 发起第二次请求
 91 |       }).then((data) => {
 92 |         console.log('第二个返回：', data)
 93 |         return mySend('/api/person3', data) // 发起第三次请求
 94 |       }).then((data) => {
 95 |         console.log('第三个返回：', data)
 96 |         return mySend('/api/person4', data) // 发起第四次请求
 97 |       }).then((data) => {
 98 |         console.log('第四个返回：', data)
 99 |       })
100 |     }
101 | 
102 |     // 一起批量访问
103 |     const submitMore = () => {
104 |       Promise.all([
105 |         mySend('/api/person11', [1,2,3]),
106 |         mySend('/api/person22', [4,5,6]),
107 |         mySend('/api/person33', [7,8,9])
108 |       ]).then((data) => {
109 |         console.log("一起调用，一起返回：")
110 |         console.log('data:', data)
111 |         console.log('data11:', data[0])
112 |         console.log('data22:', data[1])
113 |         console.log('data33:', data[2])
114 |       },(msg) => {
115 |         console.log(msg)
116 |       })
117 |     }
118 | 
119 |   </script>
120 | </body>
121 | </html>
122 | 
123 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 naturefwvue
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nf-vue-cnd
 2 | 
 3 | 在线演示的项目的汇总，基本都是CDN模式的，这个做在线演示比较容易。
 4 | 
 5 | ## cnd模式
 6 | 
 7 | cnd模式下的一些小项目  
 8 | 
 9 | ### cnd/project-template （工程化模板）
10 | 
11 | CDN 的工程化开发的模板。
12 | 从jQuery的思维转换到Vue工程化的思维的捷径。  
13 | 不需要webpack、node、npm等，可以直接感受工程化带来的好处。  
14 | 
15 | 详细介绍：  
16 | <https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-template>  
17 | 在线演示：  
18 | <https://naturefwvue.github.io/nf-vue-cnd/cnd/project-template/>  
19 | 
20 | ### cnd/project-admin （管理后台）
21 | 
22 | 尝试一下，使用CDN工程化的方式做管理后台。还在完善中。
23 | 
24 | 详细内容：  
25 | <https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-admin>
26 | 
27 | 在线演示：  
28 | <https://naturefwvue.github.io/nf-vue-cnd/cnd/project-admin/>  
29 | 
30 | ### cnd/project （简单使用）
31 | 
32 | CDN的基础使用方式。
33 | 
34 | 详细内容：  
35 | <https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project>
36 | 
37 | 在线演示：  
38 | <https://naturefwvue.github.io/nf-vue-cnd/cnd/project/>  
39 | 
40 | ### cnd/project-vuex （状态管理）
41 | 
42 | Vuex状态管理相关的尝试
43 | 
44 | 详细内容：  
45 | <https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-vuex>
46 | 
47 | 在线演示：  
48 | <https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex/>  
49 | 
50 | ### cnd/project-axios （ajax和后端通信）
51 | 
52 | axios相关的尝试
53 | 
54 | 详细内容：  
55 | <https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-axios>  
56 | 
57 | 在线演示：  
58 | <https://naturefwvue.github.io/nf-vue-cnd/cnd/project-axios/>  
59 | 
60 | ### cnd/init
61 | 
62 | vue全家桶 + UI库的加载方式，以及简单的使用方式。  
63 | 在线演示：  
64 | <https://naturefwvue.github.io/nf-vue-cnd/cnd/init>  
65 | 
66 | ## ES6基础知识的尝试
67 | 
68 | ES6 相关的一些演示代码
69 | 
70 | ### ES6/promise
71 | 
72 | promise 的简单封装
73 | 在线演示：  
74 | <https://naturefwvue.github.io/nf-vue-cnd/ES6/promise/>  
75 | 


--------------------------------------------------------------------------------
/cnd/LocalStore/IndexedDB/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <link rel="icon" href="public/favicon.ico" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>用Promise封装一下IndexedDB</title>
  8 |   <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
  9 | </head>
 10 | <body>
 11 |   <div>
 12 |     测试功能
 13 |   </div>
 14 |   <div id="app">
 15 |     <hr>
 16 |     IndexedDb的操作演示<br>
 17 |     <input type="button" @click="myOpen" value="打开数据库"/><br><br>
 18 |     <input type="button" @click="getAll" value="获取全部对象"/><br><br>
 19 |     <input type="text" v-model="delId"><br>
 20 |     <input type="button" @click="getBlog(delId)" value="获取一个对象"/><br><br>
 21 |     
 22 |     <input type="button" @click="add" value="添加对象"/><br><br>
 23 |     <input type="text" v-model="updateBlog.title"><br>
 24 |     <input type="text" v-model="updateBlog.introduction"><br>
 25 |     <input type="text" v-model="updateBlog.concent"><br>
 26 |     <input type="button" @click="update(updateBlog)" value="修改对象"/>
 27 |     
 28 |     <br><br>
 29 |     <input type="text" v-model="delId"><br>
 30 |     <input type="button" @click="delObject(delId)" value="删除对象"/>
 31 |     <br><br>
 32 |     <input type="button" @click="clear" value="清空仓库"/><br><br>
 33 |     <input type="button" @click="delStore" value="删除仓库"/><br><br>
 34 |     <input type="button" @click="delDb" value="删除数据库"/><br><br>
 35 |     
 36 |     <input type="text" v-model="findKey"><br>
 37 |     <input type="button" @click="find" value="查询"/><br><br>
 38 |    
 39 |     <input type="button" @click="myOpen" value="打开数据库"/><br>
 40 |     <div>
 41 |       查询结果：<br>
 42 |       <div v-for="(item, index) in findRe"
 43 |         style="margin: 15px;"
 44 |         :key="index"
 45 |         >
 46 |         {{index}}--{{item}}
 47 |       </div>
 48 |     </div>
 49 |     <div>
 50 |       操作结果：<br>
 51 |       {{re}}
 52 |     </div>
 53 |     <hr>
 54 |     <div>
 55 |       全部数据：
 56 |     </div>
 57 |     <div v-for="(item, index) in allObject"
 58 |       style="margin: 15px;"
 59 |       :key="index"
 60 |       @mousemove="readyDel(item.id)" 
 61 |       @click="readyUpdate(item)"
 62 |       >
 63 |       {{index}}--{{item}}
 64 |     </div>
 65 |     <hr>
 66 | 
 67 |   <script type="module">
 68 |     import nfIndexedDB from './nf-indexedDB.js'
 69 | 
 70 |     // 演示添加、修改、删除的类
 71 |     const crudManage = (re, getAll) =>{
 72 |       const {
 73 |         addObject, // 添加对象
 74 |         updateObject,// 修改对象
 75 |         deleteObject,// 删除对象
 76 |         clearStore,// 清空对象仓库
 77 |         deleteStore,// 删除对象仓库
 78 |         deleteDB// 删除整个数据库
 79 |       } = nfIndexedDB()
 80 | 
 81 |       // 添加对象
 82 |       const add = () => {
 83 |         addObject('blog',{
 84 |           id: new Date().valueOf(),
 85 |           groupId: 1,
 86 |           title: '这是三个博客',
 87 |           addTime: '2020-10-15',
 88 |           introduction: '这是博客简介',
 89 |           concent: '这是博客的详细内容<br>第二行',
 90 |           viewCount: 1,
 91 |           agreeCount: 1
 92 |         }).then((data) => {
 93 |           re.value = data
 94 |           getAll()
 95 |         })
 96 |       }
 97 | 
 98 |       // 修改对象
 99 |       const update = (blog) => {
100 |         updateObject('blog',blog).then((data) => {
101 |           re.value = data
102 |           getAll()
103 |         })
104 |       }
105 | 
106 |       // 删除对象
107 |       const delObject = (id) => {
108 |         deleteObject('blog',id).then((data) => {
109 |           re.value = data
110 |           getAll()
111 |         })
112 |       }
113 | 
114 |       // 清空对象
115 |       const clear = () => {
116 |         clearStore('blog').then((data) => {
117 |           re.value = data
118 |           getAll()
119 |         })
120 |       }
121 | 
122 |       // 删除对象仓库
123 |       const delStore = () => {
124 |         deleteStore('blog').then((data) => {
125 |           re.value = data
126 |           getAll()
127 |         })
128 |       }
129 | 
130 |       // 删除数据库
131 |       const delDb = () => {
132 |         deleteDB('dbTest').then((data) => {
133 |           re.value = data
134 |           getAll()
135 |         })
136 |       }
137 | 
138 |       return {
139 |         add, // 添加对象
140 |         update, // 修改对象
141 |         delObject, // 删除对象
142 |         clear, // 清空对象仓库
143 |         delStore, // 删除对象仓库
144 |         delDb // 删除整个数据库
145 |       }
146 |     }
147 |   
148 |     // 准备修改、删除的类
149 |     const readyManage = () => {
150 |       const delId = Vue.ref(0)
151 | 
152 |       const updateBlog = Vue.ref({
153 |         id: 0,
154 |         title: '',
155 |         introduction: '',
156 |         concent: ''
157 |       })
158 | 
159 |       // 准备删除
160 |       const readyDel = (id) => {
161 |         delId.value = id
162 |       }
163 | 
164 |       // 准备修改
165 |       const readyUpdate = (obj) => {
166 |         updateBlog.value = obj
167 |       }
168 | 
169 |       return {
170 |         delId, // 要删除的对象ID
171 |         updateBlog, // 要修改的对象
172 |         readyDel, // 准备删除
173 |         readyUpdate // 准备修改
174 |       }
175 |     }
176 | 
177 |     // 查询的类
178 |     const findManage = (re, getAll) => {
179 |       const {
180 |         findObject
181 |       } = nfIndexedDB()
182 | 
183 |       const findKey = Vue.ref('') // 查询关键字
184 |       const findRe = Vue.ref('') // 查询结果
185 | 
186 |       // 查询条件
187 |       const findInfo = {
188 |         indexName: 'groupId',
189 |         indexKind: '=', // '>','>=','<','<=','between',
190 |         indexValue: 1,
191 |         betweenInfo: {
192 |           v1:1,
193 |           v2:2,
194 |           v1isClose:true,
195 |           v2isClose:true,
196 |         },
197 |         where: (object) => {
198 |           if (findKey.value == '') return true
199 |           let re = false
200 |           if (object.title.indexOf(findKey.value) >= 0) {
201 |             re = true
202 |           }
203 |           if (object.introduction.indexOf(findKey.value) >= 0) {
204 |             re = true
205 |           }
206 |           if (object.concent.indexOf(findKey.value) >= 0) {
207 |             re = true
208 |           }
209 |           return re
210 |         }
211 |       }
212 | 
213 |       const find = () => {
214 |         findObject('blog', findInfo).then((data) => {
215 |           findRe.value = data
216 |         })
217 |       }
218 | 
219 |       return {
220 |         findKey,
221 |         findRe,
222 |         find
223 |       }
224 |     }
225 | 
226 |     const App = {
227 |       setup() {
228 |         // 获取indexedDb的操作类
229 |         const {
230 |           dbOpen,
231 |           getObject
232 |         } = nfIndexedDB()
233 | 
234 |         // 显示仓库里所有的对象
235 |         const allObject = Vue.ref([])
236 |         // 显示操作结果的对象
237 |         const re = Vue.ref(0)
238 |       
239 |         // 获取全部数据
240 |         const getAll = () => {
241 |           getObject('blog').then((data) =>{
242 |             allObject.value = data
243 |           })
244 |         }
245 |         getAll() // 获取先
246 | 
247 |         // 获取一个对象
248 |         const getBlog = (id) =>{
249 |           getObject('blog', id).then((data) =>{
250 |             re.value = data
251 |           })
252 |         }
253 | 
254 |         // 打开数据库，并且初始化
255 |         const myOpen = () => {
256 |           dbOpen().then(() =>{
257 |             // 建表初始化之后，获取全部对象
258 |             getAll()
259 |           })
260 |         }
261 |       
262 |         // 准备修改和删除的事件
263 |         const {
264 |           delId, // 要删除的对象ID
265 |           updateBlog, // 要修改的对象
266 |           readyDel, // 准备删除
267 |           readyUpdate // 准备修改
268 |         } = readyManage()
269 | 
270 |         // 获取添加、修改、删除的操作类
271 |         // 传入对象和事件，用于更新数据
272 |         const {
273 |           add,
274 |           update,
275 |           delObject,
276 |           clear,
277 |           delStore,
278 |           delDb
279 |         } = crudManage(re, getAll)
280 | 
281 |         // 查询和翻页
282 |         const {
283 |           findKey,
284 |           find,
285 |           findRe
286 |         } = findManage(re, getAll)
287 |       
288 |         
289 |         // 向模板提供数据和事件
290 |         return {
291 |           allObject, // 全部数据
292 |           re, // 显示操作结果
293 |           myOpen, // 打开数据库、初始化
294 |           getAll, // 获取全部数据的事件
295 |           getBlog, // 获取一个对象
296 |           // 增删改查
297 |           add, // 添加对象
298 |           update, // 修改对象
299 |           clear, // 清空对象仓库
300 |           delObject, // 删除对象仓库
301 |           delDb, // 删除数据库
302 |           // 准备删除和修改
303 |           delId, // 要删除的对象ID
304 |           updateBlog, // 要修改的对象
305 |           readyDel, // 准备删除
306 |           readyUpdate, // 准备修改
307 |           // 查询和翻页
308 |           findKey, // 查询关键字
309 |           find, // 查询事件
310 |           findRe // 查询结果
311 |         }
312 |          
313 |       }
314 |     }
315 |     const vm = Vue.createApp(App).mount('#app')
316 | 
317 |   </script>
318 | </body>
319 | </html>
320 | 


--------------------------------------------------------------------------------
/cnd/LocalStore/IndexedDB/nf-indexedDB.config.js:
--------------------------------------------------------------------------------
 1 | const config = {
 2 |   dbName: 'dbTest',
 3 |   ver: 1,
 4 |   debug: true,
 5 |   objectStores: [ // 建库依据
 6 |     {
 7 |       objectStoreName: 'blog',
 8 |       index: [ // 索引 ， unique 是否可以重复
 9 |         { name: 'groupId', unique: false }
10 |       ]
11 |     }
12 |   ],
13 |   objects: { // 初始化数据
14 |     blog: [
15 |       {
16 |         id: 1,
17 |         groupId: 1,
18 |         title: '这是一个博客',
19 |         addTime: '2020-10-15',
20 |         introduction: '这是博客简介',
21 |         concent: '这是博客的详细内容<br>第二行',
22 |         viewCount: 1,
23 |         agreeCount: 1
24 |       },
25 |       {
26 |         id: 2,
27 |         groupId: 2,
28 |         title: '这是两个博客',
29 |         addTime: '2020-10-15',
30 |         introduction: '这是博客简介',
31 |         concent: '这是博客的详细内容<br>第二行',
32 |         viewCount: 10,
33 |         agreeCount: 10
34 |       }
35 |     ]
36 |   }
37 | }
38 | 
39 | export default config
40 | 


--------------------------------------------------------------------------------
/cnd/LocalStore/IndexedDB/新建文本文档 (2).txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/LocalStore/IndexedDB/新建文本文档 (2).txt


--------------------------------------------------------------------------------
/cnd/LocalStore/IndexedDB/新建文本文档.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/LocalStore/IndexedDB/新建文本文档.txt


--------------------------------------------------------------------------------
/cnd/Vue3Composition/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <link rel="icon" href="public/favicon.ico" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Vue3的Composition 的演示</title>
 8 |   <!--axios-->
 9 | </head>
10 | <body>
11 |   <div>
12 |     目录
13 |   </div>
14 |   <div id="app">
15 |     <a href="reactive.html" >reactive的演示</a><br><br>
16 |     <a href="ref.html" >ref的演示</a><br><br>
17 | 
18 |   </div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/cnd/Vue3Composition/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/Vue3Composition/public/favicon.ico


--------------------------------------------------------------------------------
/cnd/Vue3Composition/reactive.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <link rel="icon" href="public/favicon.ico" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Vue3 的 reactive 的演示</title>
  8 |   <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
  9 | </head>
 10 | <body>
 11 |   <div>
 12 |     reactive 的演示...
 13 |   </div>
 14 |   <div id="app">
 15 |     <hr>
 16 |     person：{{person}}<br>
 17 |     myReatReadonly：{{myReatReadonly}}<br>
 18 |     myReatReadonly：{{myReatReadonly}}<br>
 19 | 
 20 |   </div>
 21 | 
 22 |   <script type="text/javascript">
 23 |     // ES6 的 Proxy 
 24 |     let onWatch = (obj, setBind, getLogger) => {
 25 |       let handler = {
 26 |         get(target, property, receiver) {
 27 |           getLogger(target, property)
 28 |           return Reflect.get(target, property, receiver)
 29 |         },
 30 |         set(target, property, value, receiver) {
 31 |           setBind(value, property)
 32 |           return Reflect.set(target, property, value)
 33 |         }
 34 |       }
 35 |       return new Proxy(obj, handler)
 36 |     }
 37 | 
 38 |   let obj = { a: 1 }
 39 |   let p = onWatch(
 40 |     obj,
 41 |     (v, property) => {
 42 |       console.log(`监听到属性${property}改变为${v}`)
 43 |     },
 44 |     (target, property) => {
 45 |       console.log(`'${property}' = ${target[property]}`)
 46 |     }
 47 |   )
 48 |   console.log(p)
 49 |   p.a = 2 // 监听到属性a改变
 50 | 
 51 |   </script>
 52 | 
 53 |   <script type="module">
 54 |     const App = {
 55 |       setup() {
 56 |         const person = Vue.reactive({
 57 |           name: 'jyk',
 58 |           age: 100,
 59 |           contact: {
 60 |             QQ: 122345,
 61 |             photo: 13012312314
 62 |           }
 63 |         })
 64 | 
 65 |         console.log('reactive:', person)
 66 |         console.log('reactive-Type:', typeof person)
 67 |         console.log('reactive-call:', Object.prototype.toString.call(person))
 68 | 
 69 |         // reactive 的 readonly
 70 |         const myReatReadonly = Vue.readonly(person)
 71 |         myReatReadonly.name = 'myReadonly' // 会出警告
 72 |         console.log('myReatReadonly:', myReatReadonly)
 73 | 
 74 |         // 普通对象的 readonly
 75 |         const myObjectReadonly = Vue.readonly({
 76 |           name:'object',
 77 |           age: 100
 78 |         })
 79 |         console.log('myObjectReadonly:', myObjectReadonly)
 80 | 
 81 |         // 简单类型的 readonly
 82 |         const myNumberReadonly = Vue.readonly(0) // 警告
 83 |         console.log('myNumberReadonly:', myNumberReadonly)
 84 | 
 85 |         // isProxy
 86 |         console.log('reactive:',Vue.isProxy(person))
 87 |         console.log('readonly:',Vue.isProxy(myReatReadonly))
 88 |         console.log('ObjectReadonly:',Vue.isProxy(myObjectReadonly))
 89 |         console.log('isProxy:',Vue.isProxy({name:'isProxy'}))
 90 |         console.log('-----------分隔符-----------')
 91 | 
 92 |         // isReactive
 93 |         console.log('reactive:',Vue.isReactive(person))
 94 |         console.log('readonly:',Vue.isReactive(myReatReadonly))
 95 |         console.log('ObjectReadonly:',Vue.isReactive(myObjectReadonly))
 96 |         console.log('isReactive:',Vue.isReactive({name:'isReactive'}))
 97 |         console.log('-----------分隔符-----------')
 98 | 
 99 |         // isReadonly
100 |         console.log('reactive:',Vue.isReadonly(person))
101 |         console.log('readonly:',Vue.isReadonly(myReatReadonly))
102 |         console.log('ObjectReadonly:',Vue.isReadonly(myObjectReadonly))
103 |         console.log('isReadonly:',Vue.isReadonly({name:'isReadonly'}))
104 |         console.log('-----------分隔符-----------')
105 | 
106 |         // toRaw
107 |         console.log('reactive:',Vue.toRaw(person))
108 |         console.log('readonly:',Vue.toRaw(myReatReadonly))
109 |         console.log('ObjectReadonly:',Vue.toRaw(myObjectReadonly))
110 |         console.log('toRaw:',Vue.toRaw({name:'toRaw'}))
111 | 
112 |         return {
113 |           person,
114 |           myReatReadonly,
115 |           myObjectReadonly
116 |         }
117 |       }
118 |     }
119 |     
120 |     const vm = Vue.createApp(App).mount('#app')
121 | 
122 |   </script>
123 | </body>
124 | </html>
125 | 


--------------------------------------------------------------------------------
/cnd/Vue3Composition/ref.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <link rel="icon" href="public/favicon.ico" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Vue3 的 ref 的演示</title>
 8 |   <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
 9 | </head>
10 | <body>
11 |   <div>
12 |     reactive 的演示...
13 |   </div>
14 |   <div id="app">
15 |     <hr>
16 |     reactive：{{person}} <br>
17 |     name: {{name}}<br>
18 |   </div>
19 | 
20 |   <script type="module">
21 |     const App = {
22 |       setup() {
23 | 
24 |         // 简单类型
25 |         const string = Vue.ref('jyk')
26 | 
27 |         // 对象
28 |         const person = Vue.ref({
29 |           name: 'jyk',
30 |           age: 100
31 |         })
32 | 
33 |         console.log('ref-string:', string)
34 |         console.log('ref-type:', typeof string)
35 |         console.log('ref-call:', Object.prototype.toString.call(string))
36 |         
37 |         console.log('ref-object:', person)
38 |         console.log('ref-type:', typeof person)
39 |         console.log('ref-call:', Object.prototype.toString.call(person))
40 |      
41 |         // unref
42 |         console.log('person:',Vue.unref(person))
43 |         console.log('personToRaw:',Vue.toRaw(person))
44 |         console.log('personUnrefToRaw:',Vue.toRaw(Vue.unref(person)))
45 |         console.log('string:',Vue.unref(string))
46 |         console.log('stringUnrefToRaw:',Vue.toRaw(Vue.unref(string)))
47 |         console.log('unref:',Vue.unref({name:'unref'}))
48 | 
49 |         // toRef
50 |         const person2 = Vue.reactive({
51 |           name: 'jyk',
52 |           age: 100
53 |         })
54 |         const personNameToRef = Vue.toRef(person2, 'name')
55 |         console.log('toRef', personNameToRef)
56 |         console.log('toRefValue', personNameToRef.value)
57 |         console.log('toRef2', Vue.ref(person2.name))
58 |         console.log('-----------分隔符-----------')
59 | 
60 |         // toRef
61 |         const personToRefs = Vue.toRefs(person2)
62 |         console.log('toRefs', personToRefs)
63 |         console.log('toRefs2', personToRefs.name)
64 |         console.log('-----------分隔符-----------')
65 | 
66 |         // isRef
67 |         console.log('reactive', Vue.isRef(person2))
68 |         console.log('ref', Vue.isRef(person))
69 |         console.log('object', Vue.isRef({name:'isRef'}))
70 |         console.log('number', Vue.isRef(123))
71 |         
72 | 
73 |         setTimeout(() => {
74 |           person2.name = '1111111'
75 |         },1000)
76 |         return {
77 |           person,
78 |           // ...person2,
79 |           ...personToRefs
80 |           
81 |         }
82 |       }
83 |     }
84 |     
85 |     const vm = Vue.createApp(App).mount('#app')
86 | 
87 |   </script>
88 | </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/cnd/caifumoni.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |     <title>模拟抖音里的一个模拟分配的方案</title>
 9 |     <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
10 |   </head>
11 |   <body>
12 |     <div id="app">
13 |       一百个人，每轮都要随机给另一个人一元钱。<br>
14 |       <input type="button" value="初始化" @click="init"/><br>
15 |       <input type="button" value="开始游戏" @click="start"/><br>
16 |       {{state}}<br>
17 |       <template v-for="(item, index) in person" :key="index">
18 |           {{item}} <br>
19 |       </template>
20 |       
21 |     </div>
22 |  
23 |   <script type="text/javascript">
24 |     // 定义数组
25 |     const person = Vue.reactive([])
26 |     // 定义状态
27 |     const state = Vue.reactive({
28 |       timer: 0,
29 |       maxMoney: 0,
30 |       minMoney: 9999999
31 |     })
32 |     // 初始化数据
33 |     const init = () => {
34 |       // 清空
35 |       person.length = 0
36 |       // 填入初始金额
37 |       for (let i=0; i<100; i++) {
38 |         person.push(100)
39 |       }
40 |       state.timer = 0,
41 |       state.maxMoney = 0,
42 |       state.minMoney = 9999999
43 |       console.log('初始化完毕：', person)
44 |     }
45 | 
46 |     // 开始游戏
47 |     const start = () => {
48 |       // 循环次数
49 |       const count = 40000
50 |       // 填入初始金额
51 |       for (let j=0; j<count; j++) { // 循环次数
52 |         setTimeout(() => {
53 |           for (let i=0; i<100; i++) { // 每个人给一次钱
54 |             const sjs = Math.floor(Math.random()*100)
55 |             // console.log(sjs)
56 |             // 自己的钱-1，随机数的人+1
57 |             person[i] -= 1
58 |             person[sjs] +=1
59 |             // console.log('人数', i)
60 |             // 记录
61 |             if (state.maxMoney < person[i]) {
62 |               state.maxMoney = person[i]
63 |             }
64 |             if (state.minMoney > person[i]) {
65 |               state.minMoney = person[i]
66 |             }
67 |           }
68 |           state.timer = j
69 |         },10)
70 |       }
71 |       // console.log('初始化完毕：', person)
72 |     }
73 | 
74 |     // vue3的对象
75 |     const vue3Composition = {
76 |       setup() { // 传说中的setup
77 |         // 使用外面的定义，分解setup内部的代码
78 |        
79 |         return {  // 返回给模板，否则模板访问不到。
80 |           person,
81 |           state,
82 |           start,
83 |           init
84 |         }
85 |       }
86 |     }
87 |     // 创建vue3的实例
88 |     const vm = Vue.createApp(vue3Composition)
89 |       .mount('#app') // 挂载Vue的app实例
90 | 
91 | 
92 |   </script>
93 | </body>
94 | </html>
95 | 
96 | 


--------------------------------------------------------------------------------
/cnd/init/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 |   <head>
  5 |     <meta charset="utf-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8 |     <title>CND的方式，安装各种js脚本</title>
  9 |     <!--
 10 |       <script src="js/vue.global.js"></script>
 11 |       <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
 12 |       <script src="https://unpkg.com/vue-router"></script>
 13 |       <script src="https://unpkg.com/vue@next"></script>
 14 |       <script src="https://unpkg.com/vue-router@next"></script>
 15 |       <script src="https://unpkg.com/vuex@next"></script>
 16 |     -->
 17 |     
 18 |     <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
 19 |     <script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
 20 |     <script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js"></script>
 21 |     <!-- element-plus 引入样式 -->
 22 |     <link rel="stylesheet" href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css">
 23 |     <!-- element-plus 引入组件库 -->
 24 |     <script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></script>
 25 |     <!-- Ant Design Vue 引入样式 
 26 |     <link rel="stylesheet" href="js/antdv/antd.css">-->
 27 |     <!-- Ant Design Vue 引入组件库 
 28 |     <script src="js/antdv/antd.min.js"></script>-->
 29 |     <!-- Vant 引入样式文件 -->
 30 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"/>
 31 |     <!-- Vant 引入组件库 -->
 32 |     <script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
 33 |   </head>
 34 |   <body>
 35 |     <div id="app">
 36 |       vuex状态演示<br>
 37 |       $store - count：{{$store.state.count}}<br>
 38 |       $store - myObject：{{$store.state.myObject}}<br>
 39 |       $store - myObject.time：{{$store.state.myObject.time}}<br>
 40 |       setup - count：{{count}}<br>
 41 |       setup - obj ：{{obj}}<br>
 42 |       setup - objTime ：{{objTime}}<br>
 43 |       <el-button type="primary" @click="setCount">vuex的 计数</el-button><br>
 44 |       <el-button type="primary" @click="setTime">vuex的 设置属性</el-button><br>
 45 |       <hr>
 46 | 
 47 |       数据绑定和UI库的演示<br>
 48 |       {{value}}<br>
 49 |       <!--原生dom-->
 50 |       <input type="button" value="测试" @click="click"/><br>
 51 |       <!--element-plus 的 按钮-->
 52 |       <el-button @click="click">elemet的按钮</el-button><br>
 53 |       <!--Ant Design Vue 的 按钮
 54 |       <a-button type="primary" @click="click">antdv的按钮</a-button><br>-->
 55 |       <!--Vant 的 按钮-->
 56 |       <van-button type="success" @click="click">vant的按钮</van-button><br>
 57 |       <hr>
 58 | 
 59 |       路由的演示<br>
 60 |       <div>
 61 |         <p>
 62 |           路由的简单演示，其实CND方式不太适合用路由，因为组件写起来比较麻烦。<br>
 63 |           <!-- 使用 router-link 组件来导航. -->
 64 |           <!-- 通过传入 `to` 属性指定链接. -->
 65 |           <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 66 |           <router-link to="/home">首页</router-link>&nbsp;&nbsp;&nbsp;
 67 |           <router-link to="/product">产品</router-link>
 68 |         </p>
 69 |         <!-- 路由出口 -->
 70 |         <!-- 路由匹配到的组件将渲染在这里 -->
 71 |         路由入口<br>
 72 |         <router-view></router-view>
 73 |       </div>
 74 |     </div>
 75 |  
 76 |   <script type="text/javascript">
 77 | 
 78 |     
 79 |     // =================== 路由的简单使用 ========================================
 80 |     // 1、定义组件
 81 |     const home = { 
 82 |       template: '<div>假装这是首页{{$store.state.myObject.time}}</div>',
 83 |       setup() {
 84 |         // alert('我是首页')
 85 |       }
 86 |     }
 87 |     const product = { 
 88 |       template: '<div>假装这是商品页面{{$store.state.count}}</div>',
 89 |       setup() {
 90 |         // alert('我是商品介绍')
 91 |       }
 92 |     }
 93 | 
 94 |     // 2、定义路由
 95 |     const routes = [
 96 |       { path: '/home', component: home },
 97 |       { path: '/product', component: product }
 98 |     ]
 99 |     // 获取路由方式
100 |     const history = VueRouter.createWebHistory()
101 |     // 3. 创建 router 实例，vue3需要挂载实例
102 |     const router = VueRouter.createRouter({
103 |       history,
104 |       routes
105 |     })
106 | 
107 |     // =================== vuex 的简单使用 =======================
108 |     const myStore = {
109 |       state: {
110 |         count: 0,
111 |         myObject: {
112 |           time: '现在的时间'
113 |         }
114 |       },
115 |       getters: {
116 |         getCount: (state) => {
117 |           return state.count
118 |         },
119 |         getMyObject: (state) => {
120 |           return Vue.readonly(state.myObject)
121 |         },
122 |         getTime: (state) => {
123 |           return state.myObject.time
124 |         }
125 |       },
126 |       mutations: {
127 |         setCount(state) {
128 |           state.count++
129 |         },
130 |         setTime(state) {
131 |           state.myObject.time = '现在时间：' + new Date()
132 |         }
133 |       }
134 |     }
135 |     // 建立vuex的实例，vue3需要挂载实例
136 |     const myVuex = Vuex.createStore(myStore)
137 | 
138 |     // =================== vue3的 Composition API 的含义
139 |     const testManage = () => {
140 |       const value = Vue.ref('你好，世界')
141 |       const click = () => {
142 |         value.value = '好的，收到' + new Date().valueOf()
143 |       }
144 | 
145 |       return {
146 |         value,
147 |         click
148 |       }
149 |     }
150 | 
151 |     // vue3的对象
152 |     const vue3Composition = {
153 |       setup() { // 传说中的setup
154 |         // 使用外面的定义，分解setup内部的代码
155 |         const { value, click } = testManage()
156 |         
157 |         const store = Vuex.useStore()
158 |         console.log(store)
159 |         const setCount = () =>{
160 |           store.commit('setCount')
161 |         }
162 | 
163 |         const setTime = () =>{
164 |           store.commit('setTime')
165 |           // 测试直接修改
166 |           // 加上 readonly 就不可修改了，
167 |           // 但是代码并不会报错
168 |           setTimeout(() => {
169 |             obj.time = '222'
170 |             console.log('setTimeout-obj',obj)
171 |           },500)
172 |         }
173 | 
174 |         // 获取state
175 |         // const count1 = store.state.count 强烈建议不要直接访问
176 |         const count = store.getters.getCount
177 |         const obj = store.getters.getMyObject
178 |         const objTime = store.getters.getTime
179 |         console.log('obj', obj)
180 |         console.log('objTime', objTime)
181 | 
182 |         return {  // 返回给模板，否则模板访问不到。
183 |           value,
184 |           click,
185 |           setCount,
186 |           setTime,
187 |           count,
188 |           obj,
189 |           objTime
190 |         }
191 |       }
192 |     }
193 |     // 创建vue3的实例
194 |     const vm = Vue.createApp(vue3Composition)
195 |       .use(myVuex) // 挂载vuex
196 |       .use(router) // 挂载路由
197 |       // .use(antd) // 加载 Ant Design Vue 加载的太慢，不要了
198 |       .use(ElementPlus) // 加载ElementPlus
199 |       .use(vant) // 加载vant
200 |       .mount('#app') // 挂载Vue的app实例
201 | 
202 |   </script>
203 | </body>
204 | </html>
205 | 
206 | 


--------------------------------------------------------------------------------
/cnd/project-admin/README.md:
--------------------------------------------------------------------------------
1 | 
2 | # CND 的工程化 方式做的管理后台
3 | 
4 | 先做一个动态tab标签
5 | 
6 | # 在线演示
7 | 
8 | https://naturefwvue.github.io/nf-vue-cnd/cnd/project-admin
9 | 


--------------------------------------------------------------------------------
/cnd/project-admin/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <link rel="icon" href="public/favicon.ico" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title> CDN模式下的管理后台 </title>
 8 |   <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
 9 |   <script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
10 |   <script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js"></script>
11 |   <link href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css" rel="stylesheet">
12 |   <script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></script>
13 |   <!--axios-->
14 |   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
15 |   <script type="text/javascript">
16 |     // 假定 src在网站根目录
17 |     let basrUrl = '/src/' 
18 |     // 判断所处网站，确定基础url
19 |     switch (window.location.origin) {
20 |       case 'https://naturefwvue.github.io': //github
21 |         basrUrl = '/nf-vue-cnd/cnd/project-admin/src/'
22 |         break
23 |     }
24 |     window.__ver = '?v=10'
25 |     window.__basrUrl = basrUrl
26 | 
27 |   </script>
28 |   <script type="module" src="src/script/appImport.js"></script>
29 |   <style>
30 |     .el-header, .el-footer {
31 |       background-color: #B3C0D1;
32 |       color: #333;
33 |       text-align: center;
34 |       line-height: 60px;
35 |     }
36 | 
37 |     .el-aside {
38 |       background-color: #92969b;
39 |       color: #333;
40 |       text-align: left;
41 |     }
42 | 
43 |     .el-main {
44 |       background-color: #fafafa;
45 |       color: #333;
46 |       text-align: left;
47 |     }
48 | 
49 |     body > .el-container {
50 |       margin-bottom: 40px;
51 |     }
52 | 
53 |     .el-container:nth-child(5) .el-aside,
54 |     .el-container:nth-child(6) .el-aside {
55 |       line-height: 260px;
56 |     }
57 | 
58 |     .el-container:nth-child(7) .el-aside {
59 |       line-height: 320px;
60 |     }
61 |     </style>
62 | </head>
63 | <body>
64 |   <div>
65 |     这里是CDN仿工程化开发的后台管理... 
66 |   </div>
67 |   <div id="app">
68 |     <div>
69 |       <el-container>
70 |         <el-header> <router-link :to="{name:'Home'}">首页</router-link> （路由地址） | <a href="https://naturefwvue.github.io/nf-vue-cnd/cnd/project-admin/">在线演示的首页</a> (这里是真实地址) </el-header>
71 |         <el-container>
72 |           <el-aside width="200px">
73 |             <!--导航-->
74 |             <router-view name="naveMenu"></router-view>
75 |           </el-aside>
76 |           <el-container>
77 |             <el-main>
78 |               <!--动态标签-->
79 |               <router-view name="tabs"></router-view><nfTabs/>
80 |               <!--列表页面-->
81 |               <router-view></router-view>
82 |             </el-main>
83 |             <el-footer>Footer</el-footer>
84 |           </el-container>
85 |         </el-container>
86 |     </el-container>
87 |     </div>
88 |   </div>
89 |     
90 |   
91 |   <script type="module" src="src/main.js?v=1"></script>
92 | </body>
93 | </html>
94 | 
95 | 


--------------------------------------------------------------------------------
/cnd/project-admin/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/project-admin/public/favicon.ico


--------------------------------------------------------------------------------
/cnd/project-admin/src/app.js:
--------------------------------------------------------------------------------
 1 |   
 2 |   // import { Set_Count, Set_Count_sy } from './store/mutation-types.js'
 3 | 
 4 | export default {
 5 |   name: 'app',
 6 |   components: {
 7 |     NavMenu: Vue.defineAsyncComponent(myImport('components/public/navMenu')),
 8 |     // NavMenu: Vue.defineAsyncComponent(() => import('./components/Public/navMenu.js')),
 9 |     nfTabs: Vue.defineAsyncComponent(() => myImport('components/Public/nfTabs'))
10 |   },
11 |   setup() {
12 |     console.log(myImport)
13 |     const store = Vuex.useStore()
14 | 
15 |     const handleOpen = (key, keyPath) => {
16 |       console.log(key, keyPath)
17 |     }
18 |     const handleClose = (key, keyPath) => {
19 |       console.log(key, keyPath)
20 |     }
21 | 
22 |     // 跳转到首页
23 |     const router = VueRouter.useRouter()
24 | 
25 |     // 路由跳转
26 |     router.push({
27 |       name: 'Home'
28 |     })
29 |     return {
30 |       handleOpen,
31 |       handleClose
32 |     }
33 |   }
34 | }


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/navMenu.html:
--------------------------------------------------------------------------------
 1 | <!--竖状菜单导航-->
 2 | <el-menu
 3 |   :uniqueOpened="true"
 4 |   :default-active="1"
 5 |   class="el-menu-vertical-demo"
 6 |   @open="handleOpen"
 7 |   @close="handleClose"
 8 |   @select="handleSelect"
 9 |   background-color="#545c64"
10 |   text-color="#fff"
11 |   active-text-color="#ffd04b">
12 |     <el-submenu index="1">
13 |       <template #title>
14 |         <i class="el-icon-location"></i>
15 |         <span>支撑平台</span>
16 |       </template>
17 |       <el-menu-item v-for="(item) in moduleList"
18 |         :key="item.moduleId"
19 |         :index="item.moduleId">
20 |         {{item.title}}
21 |       </el-menu-item>
22 |       <el-menu-item index="1-2">
23 |         配置信息
24 |       </el-menu-item>
25 |     </el-submenu>
26 | </el-menu>


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/navMenu.js:
--------------------------------------------------------------------------------
 1 | const moduleList = {
 2 |     m100: {
 3 |       moduleId: 100,
 4 |       title: '关于我们'
 5 |     },
 6 |     m102: {
 7 |       moduleId: 102,
 8 |       title: '增删改查一'
 9 |     },
10 |     m103: {
11 |       moduleId: 103,
12 |       title: '增删改查二'
13 |     },
14 |     m104: {
15 |       moduleId: 104,
16 |       title: '权限管理'
17 |     },
18 |     m105: {
19 |       moduleId: 105,
20 |       title: '组织架构'
21 |     },
22 |     m106: {
23 |       moduleId: 106,
24 |       title: '员工管理'
25 |     }
26 |   }
27 |   
28 |   export default {
29 |     name: 'NavMenu',
30 |     template: '',
31 |     props: {
32 |       msg: String
33 |     },
34 |     setup () {
35 |       const store = Vuex.useStore()
36 |       const router = VueRouter.useRouter()
37 |       const tabs = store.state.actionManage.tabs
38 |   
39 |       console.log('router', router)
40 |   
41 |       const handleOpen = (key, keyPath) => {
42 |         console.log(key, keyPath)
43 |       }
44 |       const handleClose = (key, keyPath) => {
45 |         console.log(key, keyPath)
46 |       }
47 |       const handleSelect = (index, indexPath) => {
48 |         console.log(typeof index)
49 |         console.log(indexPath)
50 |         console.log(tabs.filter((item) => item.id === index))
51 |         // 判断是否已经存在
52 |         if (tabs.filter((item) => item.id === index).length === 0) {
53 |           // 添加动态tab
54 |           tabs.push({
55 |             id: index,
56 |             title: moduleList['m' + index].title,
57 |             name: moduleList['m' + index].title,
58 |             content: ''
59 |           })
60 |         }
61 |         // 路由跳转
62 |         router.push({
63 |           name: 'module',
64 |           params: { moduleId: index }
65 |         })
66 |       }
67 |   
68 |       return {
69 |         moduleList,
70 |         handleSelect,
71 |         handleOpen,
72 |         handleClose
73 |       }
74 |     }
75 |   }


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfButton.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   <el-row>
 3 |     <el-button @click="click(1)">
 4 |       <router-link to="/list/1/btn/1">添加</router-link>
 5 |     </el-button>
 6 |     <el-button @click="click(2)">修改</el-button>
 7 |     <el-button @click="click(3)">删除</el-button>
 8 |     <el-button @click="click(4)">查询</el-button>
 9 |   </el-row>
10 | </div>


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfButton.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name:'button',
 3 |   template: '',
 4 |   setup () {
 5 |     const click = (btnId) => {
 6 |       console.log(btnId)
 7 |     }
 8 | 
 9 |     return {
10 |       click
11 |     }
12 |   }
13 | 
14 | }


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfFind.html:
--------------------------------------------------------------------------------
 1 | <el-form :inline="true" :model="formInline" class="demo-form-inline">
 2 |   <el-form-item label="审批人">
 3 |     <el-input v-model="formInline.user" placeholder="审批人"></el-input>
 4 |   </el-form-item>
 5 |   <el-form-item label="活动区域">
 6 |     <el-select v-model="formInline.region" placeholder="活动区域">
 7 |       <el-option label="区域一" value="shanghai"></el-option>
 8 |       <el-option label="区域二" value="beijing"></el-option>
 9 |     </el-select>
10 |   </el-form-item>
11 |   <el-form-item>
12 |     <el-button type="primary" @click="onSubmit">查询</el-button>
13 |   </el-form-item>
14 | </el-form>


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfFind.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 |   name: 'find',
 4 |   template: '',
 5 |   setup () {
 6 |     const formInline = Vue.reactive({
 7 |       user: '',
 8 |       region: ''
 9 |     })
10 | 
11 |     const onSubmit = () => {
12 |       console.log('submit!')
13 |     }
14 | 
15 |     return {
16 |       formInline,
17 |       onSubmit
18 |     }
19 |   }
20 | 
21 | }


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfForm.html:
--------------------------------------------------------------------------------
1 | <a-divider>
2 |     按钮s
3 |   </a-divider>


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfForm.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 |   name: 'nfForm',
 4 |   template: '',
 5 |   setup () {
 6 |     const editableTabsValue = Vue.ref('2')
 7 | 
 8 |     return {
 9 |       editableTabsValue
10 |     }
11 |   }
12 | 
13 | }


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfGrid.html:
--------------------------------------------------------------------------------
 1 | <el-table
 2 |   :data="tableData"
 3 |   style="width: 100%"
 4 |   height="250">
 5 |     <el-table-column
 6 |       fixed
 7 |       prop="date"
 8 |       label="日期"
 9 |       width="150">
10 |     </el-table-column>
11 |     <el-table-column
12 |       prop="name"
13 |       label="姓名"
14 |       width="120">
15 |     </el-table-column>
16 |     <el-table-column
17 |       prop="province"
18 |       label="省份"
19 |       width="120">
20 |     </el-table-column>
21 |     <el-table-column
22 |       prop="city"
23 |       label="市区"
24 |       width="120">
25 |     </el-table-column>
26 |     <el-table-column
27 |       prop="address"
28 |       label="地址"
29 |       width="300">
30 |     </el-table-column>
31 |     <el-table-column
32 |       prop="zip"
33 |       label="邮编"
34 |       width="120">
35 |     </el-table-column>
36 | </el-table>


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfGrid.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 |   name: 'grid',
 4 |   template: '',
 5 |   setup () {
 6 |     const tableData = Vue.reactive([
 7 |       {
 8 |         date: '2016-05-03',
 9 |         name: '王小虎',
10 |         province: '上海',
11 |         city: '普陀区',
12 |         address: '上海市普陀区金沙江路 1518 弄',
13 |         zip: 200333
14 |       },
15 |       {
16 |         date: '2016-05-02',
17 |         name: '王小虎',
18 |         province: '上海',
19 |         city: '普陀区',
20 |         address: '上海市普陀区金沙江路 1518 弄',
21 |         zip: 200333
22 |       },
23 |       {
24 |         date: '2016-05-04',
25 |         name: '王小虎',
26 |         province: '上海',
27 |         city: '普陀区',
28 |         address: '上海市普陀区金沙江路 1518 弄',
29 |         zip: 200333
30 |       }, {
31 |         date: '2016-05-01',
32 |         name: '王小虎',
33 |         province: '上海',
34 |         city: '普陀区',
35 |         address: '上海市普陀区金沙江路 1518 弄',
36 |         zip: 200333
37 |       }, {
38 |         date: '2016-05-08',
39 |         name: '王小虎',
40 |         province: '上海',
41 |         city: '普陀区',
42 |         address: '上海市普陀区金沙江路 1518 弄',
43 |         zip: 200333
44 |       }, {
45 |         date: '2016-05-06',
46 |         name: '王小虎',
47 |         province: '上海',
48 |         city: '普陀区',
49 |         address: '上海市普陀区金沙江路 1518 弄',
50 |         zip: 200333
51 |       }, {
52 |         date: '2016-05-07',
53 |         name: '王小虎',
54 |         province: '上海',
55 |         city: '普陀区',
56 |         address: '上海市普陀区金沙江路 1518 弄',
57 |         zip: 200333
58 |       }])
59 | 
60 |     return {
61 |       tableData
62 |     }
63 |   }
64 | 
65 | }


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfPager.html:
--------------------------------------------------------------------------------
1 | <el-pagination
2 | background
3 | layout="prev, pager, next"
4 | :total="1000"
5 | :current-page="currentPage"
6 | @current-change="currentChange">
7 | </el-pagination>


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfPager.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 |   name: 'page',
 4 |   template: '',
 5 |   setup () {
 6 |     const currentPage = Vue.ref(2)
 7 |     const currentChange = (currPager) => {
 8 |       console.log('currPager', currPager)
 9 |     }
10 |     return {
11 |       currentPage,
12 |       currentChange
13 |     }
14 |   }
15 | 
16 | }


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfTabs.html:
--------------------------------------------------------------------------------
 1 | <el-tabs
 2 | v-model="editableTabsValue"
 3 | type="card"
 4 | closable
 5 | @tab-remove="removeTab"
 6 | >
 7 | <el-tab-pane
 8 |   v-for="(item, index) in editableTabs"
 9 |   :key="item.name + index"
10 |   :label="item.title"
11 |   :name="item.name"
12 | ></el-tab-pane>
13 | </el-tabs>


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/public/nfTabs.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 |   name: 'nfTabs',
 4 |   template: '',
 5 |   setup () {
 6 |     const store = Vuex.useStore()
 7 | 
 8 |     const editableTabsValue = Vue.ref('2')
 9 |     const editableTabs = store.state.actionManage.tabs
10 |     const tabIndex = Vue.ref(1)
11 | 
12 |     // 事件
13 |     const addTab = (targetName) => {
14 |       const newTabName = ++tabIndex.value + ''
15 |       editableTabs.push({
16 |         title: 'New Tab',
17 |         name: newTabName,
18 |         content: 'New Tab content'
19 |       })
20 |       this.editableTabsValue = newTabName
21 |     }
22 |     const removeTab = (targetName) => {
23 |       const tabs = editableTabs
24 |       let activeName = editableTabsValue.value
25 |       if (activeName === targetName) {
26 |         tabs.forEach((tab, index) => {
27 |           if (tab.name === targetName) {
28 |             const nextTab = tabs[index + 1] || tabs[index - 1]
29 |             if (nextTab) {
30 |               activeName = nextTab.name
31 |             }
32 |           }
33 |         })
34 |       }
35 | 
36 |       editableTabsValue.value = activeName
37 |       editableTabs.length = 0
38 |       editableTabs.push(...tabs.filter(tab => tab.name !== targetName))
39 |     }
40 | 
41 |     return {
42 |       editableTabsValue,
43 |       editableTabs,
44 |       tabIndex,
45 |       addTab,
46 |       removeTab
47 |     }
48 |   }
49 | 
50 | }


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/test.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   <br>
3 |   这是 组件测试<br>
4 |   父组件传递参数：{{str}}<br>
5 |   setup 获取参数：{{str1}}<br>
6 | </div>


--------------------------------------------------------------------------------
/cnd/project-admin/src/components/test.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'component-test',
 3 |   template: '',
 4 |   props: {
 5 |     str: String
 6 |   },
 7 |   setup(props) {
 8 |     // 在setup里面获取参数值
 9 |     let str1 = Vue.ref(props.str)
10 |     str1.value += '--内部改一下。'
11 | 
12 |     return {
13 |       str1
14 |     }
15 |   }
16 | }


--------------------------------------------------------------------------------
/cnd/project-admin/src/main.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | import store from './store/index.js?v=28'
 3 | import router from './router/index.js?v=28'
 4 | import App from './app.js?v=28'
 5 | 
 6 | 
 7 | // 创建vue3的实例
 8 | const app = Vue.createApp(App)
 9 |   .use(store) // 挂载vuex
10 |   .use(router) // 挂载路由
11 |   .use(ElementPlus) // 加载ElementPlus
12 |   .mount('#app') // 挂载Vue的app实例
13 | 
14 | */
15 | 
16 | const ver = window.__ver || ''
17 | 
18 | Promise.all([
19 |   import('./store/index.js' + ver),
20 |   import('./router/index.js' + ver),
21 |   import('./app.js' + ver),
22 | ]).then((res) => {
23 |   // 创建vue3的实例
24 |   const app = Vue.createApp(res[2].default)
25 |     .use(res[0].default) // 挂载vuex
26 |     .use(res[1].default) // 挂载路由
27 |     .use(ElementPlus, { size: 'small' }) // 加载ElementPlus
28 |     .mount('#app') // 挂载Vue的app实例
29 | })
30 | 


--------------------------------------------------------------------------------
/cnd/project-admin/src/router/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const routes = [
 3 |   {
 4 |     path: '/',
 5 |     name: 'Home',
 6 |     // component: () => myImport('views/home')
 7 |     components: {
 8 |       default: () => myImport('views/home'),
 9 |       naveMenu: () => myImport('components/public/navMenu'),
10 |       tabs: () => myImport('components/public/nfTabs')
11 |     } 
12 |     
13 |   },
14 |   {
15 |     path: '/About',
16 |     name: 'About',
17 |     component: () => myImport('components/public/navMenu')
18 |   },
19 |   {
20 |     path: '/module/:moduleId',
21 |     name: 'module',
22 |     meta: { title: '列表页面' },
23 |     props: true,
24 |     // component: () => myImport('views/packList'),
25 |     components: {
26 |       default: () => myImport('views/packList'),
27 |       naveMenu: () => myImport('components/public/navMenu'),
28 |       tabs: () => myImport('components/public/nfTabs')
29 |     },
30 |     children: [
31 |       {
32 |         path: 'btn/:moduleId',
33 |         name: 'btn',
34 |         props: true,
35 |         meta: { title: '弹窗页面' },
36 |         component: () => myImport('views/home')
37 |       }
38 |     ]
39 |     // components: {
40 |     //  default: () => import('../views/classical/question-main-introduce.vue'),
41 |     //  answerList: () => import('../views/classical/question-main-answers.vue')
42 |     // }
43 |   }
44 | ]
45 | 
46 | const router = VueRouter.createRouter({
47 |   history: VueRouter.createWebHistory(),
48 |   routes
49 | })
50 | 
51 | export default router
52 | 


--------------------------------------------------------------------------------
/cnd/project-admin/src/script/appImport.js:
--------------------------------------------------------------------------------
 1 | // 直接放在Window里面好了。。。
 2 | window.myImport = (url) => {
 3 |   return new Promise((resolve, reject) => {
 4 |     const ver = window.__ver || ''
 5 |     const baseUrl = window.__basrUrl || '/src/'
 6 |     // 先加载js
 7 |     import(baseUrl + url + '.js' + ver).then((resjs) => {
 8 |       const js = resjs.default
 9 |       if (typeof(js.template) === 'undefined' || js.template === '') {
10 |         // 如果模板是空的，表示需要加载html作为模板
11 |         axios.get(baseUrl + url + '.html' + ver).then((resHTML) => {
12 |           js.template = resHTML.data
13 |           resolve(js)
14 |         })
15 |       } else {
16 |         // 否则直接使用js注册组件
17 |         resolve(js)
18 |       }
19 |     })
20 |   })
21 | }
22 | 


--------------------------------------------------------------------------------
/cnd/project-admin/src/store/actionManage.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | * 各个组件间的交互事件、状态传递
 3 | */
 4 | 
 5 | const actionManage = {
 6 |   state: () => ({
 7 |     // 当前状态集合
 8 |     currState: {
 9 |       pageIndex: 1 // 当前激活的分页列表的页号
10 |     },
11 |     // tab标签集合
12 |     tabs: [
13 |       {
14 |         id: 1,
15 |         title: '桌面', // tab的标题
16 |         name: 'home' // tab的名称
17 |       }
18 |     ]
19 |     // 组件数据集合
20 |   }),
21 |   mutations: {
22 |     // 添加动态tab
23 |   },
24 |   actions: {
25 |   }
26 | }
27 | 
28 | export default actionManage
29 | 


--------------------------------------------------------------------------------
/cnd/project-admin/src/store/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import actionManage from './actionManage.js'
 3 | 
 4 | export default Vuex.createStore({
 5 |   state: {
 6 |   },
 7 |   mutations: {
 8 |   },
 9 |   actions: {
10 |   },
11 |   modules: {
12 |     actionManage
13 |   }
14 | })
15 | 


--------------------------------------------------------------------------------
/cnd/project-admin/src/store/map.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const map = () => {
 3 |   const store = Vuex.useStore()
 4 |     
 5 |   /**
 6 |   * 获取count，
 7 |   * 用computed实现相应
 8 |   */
 9 |   const getCount = () => {
10 |     return Vue.computed(() => store.state.count)
11 |   }
12 | 
13 |   /**
14 |   * 获取count，
15 |   ** 用 ref 实现相应
16 |   */
17 |   const getRefCount = () => {
18 |     return Vue.ref(store.state.count)
19 |   }
20 | 
21 |   /**
22 |   * 获取对象
23 |   */
24 |   const getObject = () => {
25 |     return store.state.myObject
26 |   }
27 | 
28 |   /**
29 |   * 获取只读对象
30 |   */
31 |   const getReadonlyObject = () => {
32 |     return Vue.readonly(store.state.myObject)
33 |   }
34 | 
35 |   /**
36 |   * 获取数组
37 |   */
38 |   const getArray = () => {
39 |     return store.state.myArray
40 |   }
41 |   /**
42 |   * 获取只读数组
43 |   */
44 |   const getReadonlyArray = () => {
45 |     return Vue.readonly(store.state.myArray)
46 |   }
47 | 
48 |   /**
49 |   * 查询数组
50 |   ** id：要查询的数据
51 |   */
52 |   const filterArray = (id) => {
53 |     return  Vue.computed(() => store.getters.filterArray(id))
54 |   }
55 | 
56 |   return {
57 |     getCount,
58 |     getRefCount,
59 |     getObject,
60 |     getReadonlyObject,
61 |     getArray,
62 |     getReadonlyArray,
63 |     filterArray
64 |   }
65 | 
66 | }
67 | 
68 | export default map


--------------------------------------------------------------------------------
/cnd/project-admin/src/store/mutation-types.js:
--------------------------------------------------------------------------------
1 | export const Set_Count = 'set_count'
2 | export const Set_Count_sy = Symbol('set_count')
3 | 


--------------------------------------------------------------------------------
/cnd/project-admin/src/views/About.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   演示一下由路由加载的组件。<br>
3 |   html 和 js分开写的方式。<br>
4 |   插值演示：{{value}}<br>
5 | </div>
6 |   


--------------------------------------------------------------------------------
/cnd/project-admin/src/views/About.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     name: 'About',
 3 |     template: '',
 4 |     setup () {
 5 |       const value = Vue.ref('数据绑定的演示')
 6 |    
 7 |       return {
 8 |         value
 9 |       }
10 |     }
11 |   }
12 |   


--------------------------------------------------------------------------------
/cnd/project-admin/src/views/component.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   演示一下组件里面使用组件的方式<br>
3 |   <test :str="value"></test>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/cnd/project-admin/src/views/component.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     name: 'template',
 3 |     template: ``,
 4 |     components: {
 5 |       test: Vue.defineAsyncComponent(
 6 |         () => myImport('components/test')
 7 |       )
 8 |     },
 9 |     setup () {
10 |       const value = Vue.ref('传入组件的参数')
11 |       return {
12 |         value
13 |       }
14 |     }
15 |   }
16 |   


--------------------------------------------------------------------------------
/cnd/project-admin/src/views/home.js:
--------------------------------------------------------------------------------
 1 | const { ref, reactive } = Vue
 2 | 
 3 | const testManage = () => {
 4 |   const hello = ref('你好，世界')
 5 |   const clickMe = () => {
 6 |     hello.value = '好的，收到，现在时间：' + new Date()
 7 |   }
 8 | 
 9 |   return {
10 |     hello,
11 |     clickMe
12 |   }
13 | }
14 | 
15 | // vue3的对象
16 | export default {
17 |   template: `
18 |       <h2>我是 {{value.name}}</h2>
19 |       <div>
20 |         老规矩：{{hello}}<br>
21 |         <el-button type="primary" @click="clickMe">快点我</el-button><br>
22 |         <br>
23 |         这里是一种CND的开发方式<br>
24 |         vue全家桶和UI库用 CND方式 加载。<br>
25 |         js代码用 import 方式加载。<br>
26 |         目录结构参考了vue-cli建立的项目。<br>
27 |         支持组件、路由、状态管理等功能。<br>
28 |         不用webpack、npm等，建立网站就可以用。<br><br>
29 |         状态计数：{{$store.state.count}}
30 |       </div>
31 |   `,
32 |   setup() {
33 |     // 使用外面的定义，分解setup内部的代码
34 |     const { hello, clickMe } = testManage()
35 | 
36 |     const value = reactive({
37 |       name: 'jyk'
38 |     })
39 | 
40 |   
41 |     return {
42 |       value,
43 |       hello,
44 |       clickMe
45 |     }
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/cnd/project-admin/src/views/packList.html:
--------------------------------------------------------------------------------
1 |  <!--列表容器-->
2 |  <div class="home">
3 |     <nfFind/>
4 |     <nfButton/>{{moduleId}}<br>
5 |     <nfGrid/>
6 |     <nfPager/>
7 |     <router-view></router-view>
8 |   </div>


--------------------------------------------------------------------------------
/cnd/project-admin/src/views/packList.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 |   name: 'PackList',
 4 |   template: '',
 5 |   components: {
 6 |     nfButton: Vue.defineAsyncComponent(
 7 |       () => myImport('components/public/nfButton')
 8 |     ),
 9 |     nfFind: Vue.defineAsyncComponent(
10 |       () => myImport('components/public/nfFind')
11 |     ),
12 |     nfPager: Vue.defineAsyncComponent(
13 |       () => myImport('components/public/nfGrid')
14 |     ),
15 |     nfGrid: Vue.defineAsyncComponent(
16 |       () => myImport('components/public/nfPager')
17 |     )
18 |   },
19 |   props: {
20 |     moduleId: Number
21 |   },
22 |   setup () {
23 |     const store = Vuex.useStore()
24 |     const aa = store.state.actionManage.tabs
25 | 
26 |     console.log('aa', aa)
27 |   }
28 | }


--------------------------------------------------------------------------------
/cnd/project-admin/src/views/store.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   这里演示一下 vuex 的一些操作：<br>
3 |   
4 |   ref的count ：{{refCount}} <br>
5 |   计算属性的Count ：{{comCount}} <br>
6 |   只读对象 ：{{readonlyObject}} <br>
7 |   
8 | </div>


--------------------------------------------------------------------------------
/cnd/project-admin/src/views/store.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   // 获取状态
 4 |   const indirectManage = () => {
 5 |     const store = Vuex.useStore()
 6 | 
 7 |     // 用toRef获取 count，有相应性，可以直接修改state
 8 |     const refCount = Vue.toRef(store.state, 'count')
 9 |     // 计算属性获取count，有相应性，不可以直接修改state
10 |     const comCount = Vue.computed(() => store.state.count + 10)
11 |     // 只读的对象，有响应性，浅层不可以修改，但是深层还是可以修改。
12 |     const readonlyObject = Vue.readonly(store.state.myObject)
13 | 
14 |     console.log('refCount：', refCount)
15 |     console.log('comCount：', comCount)
16 |     console.log('readonlyObject：', readonlyObject)
17 |     console.log('================')
18 | 
19 |     // 定时修改 count 看响应性
20 |     setTimeout(() => {
21 |       // store.commit('setCount')
22 |       // refCount.value += 200 // 会直接改vuex的state
23 |     }, 2000)
24 |    
25 |     return {
26 |       refCount,
27 |       comCount,
28 |       readonlyObject
29 |     }
30 |   }
31 | 
32 | 
33 | export default {
34 |     name: 'vuex_store',
35 |     template: '',
36 |     components: {
37 |     },
38 |     setup () {
39 |       const value = Vue.ref('状态管理的演示')
40 |       
41 |       // 获取状态
42 |       const { refCount, comCount, readonlyObject } = indirectManage()
43 |      
44 |       return {
45 |         value,
46 |         refCount, comCount, readonlyObject
47 |       }
48 |     }
49 |   }
50 |   


--------------------------------------------------------------------------------
/cnd/project-admin/web.config:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <configuration>
 3 |     <system.webServer>
 4 |         <httpErrors errorMode="Custom">
 5 |             <remove statusCode="404" subStatusCode="-1" />
 6 |             <error statusCode="404" prefixLanguageFilePath="" path="/index.html" responseMode="ExecuteURL" />
 7 |         </httpErrors>
 8 |         <security>
 9 |             <requestFiltering>
10 |                 <fileExtensions>
11 |                     <add fileExtension=".vue" allowed="true" />
12 |                 </fileExtensions>
13 |             </requestFiltering>
14 |         </security>
15 |         <staticContent>
16 |             <mimeMap fileExtension=".vue" mimeType="text/html" />
17 |         </staticContent>
18 |     </system.webServer>
19 | </configuration>
20 | 


--------------------------------------------------------------------------------
/cnd/project-axios/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # 演示一下axios的各种情况
 3 | 
 4 | * get
 5 | * post
 6 | * 类型
 7 | 
 8 | # 在线演示
 9 | 
10 | https://naturefwvue.github.io/nf-vue-cnd/cnd/project-axios
11 | 


--------------------------------------------------------------------------------
/cnd/project-axios/a.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/project-axios/a.html


--------------------------------------------------------------------------------
/cnd/project-axios/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <link rel="icon" href="public/favicon.ico" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>axios的尝试</title>
 8 |   <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
 9 |   <!--axios-->
10 |   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
11 | </head>
12 | <body>
13 |   <div>
14 |     axios...1
15 |   </div>
16 |   <div id="app">
17 |     <hr>
18 |   
19 |     <input type="button" onclick="myGet()" value="ajax-get"/><br><br>
20 |     <input type="button" onclick="myPost()" value="ajax-get"/><br><br>
21 | 
22 |     <script>
23 |       function myGet() {
24 |         axios.get('/vuex.vue')
25 |         .then(function (response) {
26 |           console.log(response);
27 |         })
28 |         .catch(function (error) {
29 |           console.log(error);
30 |         })
31 |       }
32 |       function myPost() {
33 |         axios({
34 |           method: 'post',
35 |           url: '/json.aspx?id=3',
36 |           data: {
37 |             firstName: 'Fred',
38 |             lastName: 'Flintstone'
39 |           }
40 |         }).then((response) => {
41 |           console.log(response)
42 |           console.log(response.data)
43 |         })
44 | 
45 |         return 
46 | 
47 |         axios.post('/vuex.asp', {
48 |           firstName: 'Fred',
49 |           lastName: 'Flintstone'
50 |         })
51 |         .then((response) => {
52 |           console.log(response)
53 |         })
54 |         .catch((error) => {
55 |           console.log(error)
56 |         });
57 |       }
58 |     </script>
59 | </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/cnd/project-axios/json.aspx:
--------------------------------------------------------------------------------
  1 | {
  2 |   "company":{
  3 |     "findMeta":{
  4 |       "quickFind":[1010,1013,1005,1008],
  5 |       "allFind":[1000,1001,1002,1003,1009,1004,1005,1010,1006,1007,1012,1011,1008],
  6 |       "colCount":4,
  7 |       "customer":{
  8 |         "100": {
  9 |           "name":"方案二",
 10 |           "keys":[1002,1003,1006]
 11 |         },
 12 |         "101":{
 13 |           "name":"方案三",
 14 |           "keys":[1007,1004,1010]
 15 |         }
 16 |       }
 17 |     },
 18 |     "findItem":{
 19 |       "1010":{
 20 |         "controlId": "1010",
 21 |         "colName": "private,city,area,c1,c2,c3,c4,c5",
 22 |         "controlType": 200,
 23 |         "placeholder": "省市区",
 24 |         "title": "省市区",
 25 |         "level": 2,
 26 |         "optionKind": 2,
 27 |         "optionList": [
 28 |           { "value": 1, "label": "浙江", "isLeaf": false },
 29 |           { "value": 2, "label": "江苏", "isLeaf": false },
 30 |           { "value": 3, "label": "辽宁", "isLeaf": false }
 31 |         ],
 32 |         "optionList2": [
 33 |           { "parent": 1, "value": 11, "label": "杭州" },
 34 |           { "parent": 1, "value": 12, "label": "宁波" },
 35 |           { "parent": 1, "value": 13, "label": "温州" },
 36 |           { "parent": 2, "value": 21, "label": "南京" },
 37 |           { "parent": 2, "value": 22, "label": "无锡" },
 38 |           { "parent": 3, "value": 31, "label": "沈阳" },
 39 |           { "parent": 3, "value": 32, "label": "大连" }
 40 |         ],
 41 |         "tdCount":3
 42 |       },
 43 |       "1012":{
 44 |         "controlId": "1012",
 45 |         "colName": "education",
 46 |         "controlType": 183,
 47 |         "placeholder": "学历",
 48 |         "title": "学历",
 49 |         "optionList": [
 50 |           { "value": 1, "label": "高中" },
 51 |           { "value": 2, "label": "大专" },
 52 |           { "value": 3, "label": "本科" },
 53 |           { "value": 4, "label": "硕士" },
 54 |           { "value": 5, "label": "博士" }
 55 |         ],
 56 |         "tdCount":3
 57 |       },
 58 |       "1000":{
 59 |           "controlId": 1000,
 60 |           "colName": "companyName",
 61 |           "controlType": 101,
 62 |           "class": "",
 63 |           "placeholder": "公司名称",
 64 |           "title": "公司名称",
 65 |           "size": 10,
 66 |           "maxlength": 100,
 67 |           "optionList": [],
 68 |           "findKind":"402",
 69 |           "findKindList": [401,403,402,404,405,406],
 70 |           "tdCount":1
 71 |       },
 72 |       "1001":{
 73 |           "controlId": 1001,
 74 |           "colName": "companyCode",
 75 |           "controlType": 131,
 76 |           "class": "",
 77 |           "placeholder": "公司邮编",
 78 |           "title": "公司邮编",
 79 |           "min": 100000,
 80 |           "max": 999999,
 81 |           "step": 1,
 82 |           "maxlength": 6,
 83 |           "optionList": [] ,
 84 |           "findKind":"401",
 85 |           "findKindList": [411,417,412,431,413,414,415,416],
 86 |           "tdCount":1
 87 |       },
 88 |       "1002":{
 89 |           "controlId": 1002,
 90 |           "colName": "legalPerson",
 91 |           "controlType": 101,
 92 |           "class": "",
 93 |           "placeholder": "法人姓名",
 94 |           "title": "法人",
 95 |           "autocomplete": "on",
 96 |           "size": 10,
 97 |           "maxlength": 50,
 98 |           "optionList": [] ,
 99 |           "findKind":"403",
100 |           "findKindList": [401,403,402,404,405,406],
101 |           "tdCount":1
102 |       },
103 |       "1003":{
104 |           "controlId": 1003,
105 |           "colName": "liaisonMan",
106 |           "controlType": 101,
107 |           "class": "",
108 |           "placeholder": "联系人姓名",
109 |           "title": "联系人",
110 |           "size": 10,
111 |           "maxlength": 50,
112 |           "optionList": [],
113 |           "findKind":"404",
114 |           "findKindList": [401,403,402,404,405,406],
115 |           "tdCount":1
116 |       },
117 |       "1004": {
118 |         "controlId": "1004",
119 |         "colName": "address",
120 |         "controlType": 101,
121 |         "class": "",
122 |         "placeholder": "公司地址",
123 |         "title": "公司地址",
124 |         "size": 10,
125 |         "maxlength": 50,
126 |         "optionKey": "",
127 |         "optionList": [],
128 |         "findKind":"405",
129 |         "findKindList": [401,403,402,404,405,406],
130 |         "tdCount":1
131 |       },
132 |       "1005": {
133 |         "controlId": "1005",
134 |         "colName": "telphone",
135 |         "controlType": 103,
136 |         "placeholder": "公司电话",
137 |         "title": "公司电话",
138 |         "size": 10,
139 |         "maxlength": 50,
140 |         "optionKey": "",
141 |         "optionList": [],
142 |         "findKind":"401,402",
143 |         "findKindList": [401,403,402,404,405,406],
144 |         "tdCount":1
145 |       },
146 |       "1006": {
147 |         "controlId": "1006",
148 |         "colName": "URL",
149 |         "controlType": 105,
150 |         "class": "",
151 |         "placeholder": "公司网址",
152 |         "title": "公司网址",
153 |         "autocomplete": "on",
154 |         "size": 10,
155 |         "maxlength": 50,
156 |         "optionKey": "",
157 |         "optionList": [],
158 |         "findKind":"401,402",
159 |         "findKindList": [401,403,402,404,405,406],
160 |         "tdCount":1
161 |       },
162 |       "1007": {
163 |         "controlId": "1007",
164 |         "colName": "Email",
165 |         "controlType": 104,
166 |         "class": "",
167 |         "placeholder": "公司邮件",
168 |         "title": "公司邮件",
169 |         "size": 10,
170 |         "maxlength": 50,
171 |         "optionKey": "",
172 |         "optionList": [],
173 |         "findKind":"402",
174 |         "findKindList": [401,403,402,404,405,406],
175 |         "tdCount":1
176 |       },
177 |       "1008": {
178 |         "controlId": 1008,
179 |         "colName": "type",
180 |         "title": "公司类型",
181 |         "controlType": 190,
182 |         "placeholder": "公司类型",
183 |         "class": "",
184 |         "optionList": [
185 |           { "value": 1, "title": "有限责任公司" },
186 |           { "value": 2, "title": "股份有限责任公司" },
187 |           { "value": 3, "title": "个人独资企业" },
188 |           { "value": 4, "title": "合伙企业" },
189 |           { "value": 5, "title": "个体工商户" }
190 |         ],
191 |         "findKind":"401",
192 |         "findKindList": ["401","402"],
193 |         "tdCount":1
194 |       },
195 |       "1009": {
196 |         "controlId": 1009,
197 |         "colName": "createDate",
198 |         "controlType": 141,
199 |         "class": "",
200 |         "title": "成立日期",
201 |         "placeholder": "成立日期",
202 |         "min": "1950-01-01",
203 |         "max": "2999-12-31",
204 |         "step": 1,
205 |         "findKind":"423",
206 |         "findKindList": [421,427,422,423,424,425,426],
207 |         "tdCount":3
208 |       },
209 |       "1013": {
210 |         "controlId": 1013,
211 |         "colName": "createTime",
212 |         "controlType": 149,
213 |         "class": "",
214 |         "title": "成立时间",
215 |         "placeholder": "成立时间",
216 |         "min": "1950-01-01",
217 |         "max": "2999-12-31",
218 |         "step": 1,
219 |         "findKind":"423",
220 |         "findKindList": [421,427,422,423,424,425,426],
221 |         "tdCount":3
222 |       },
223 |       "1011":{
224 |         "controlId": 1011,
225 |         "colName": "hobby",
226 |         "controlType": 182,
227 |         "isClear": true,
228 |         "disabled": false,
229 |         "required": true,
230 |         "readonly": false,
231 |         "pattern": "",
232 |         "class": "",
233 |         "title": "爱好",
234 |         "optionList": [
235 |           { "value": 1, "label": "篮球" },
236 |           { "value": 2, "label": "足球" },
237 |           { "value": 3, "label": "排球" }
238 |         ],
239 |         "tdCount":3
240 |       }
241 |     }
242 |   },
243 |   "person":{
244 |     "findMeta":{
245 |       "quickFind":[2000,2001,2002,2003],
246 |       "allFind":[2000,2001,2002,2003,2004,2005],
247 |       "colCount":4,
248 |       "customer":{
249 |         "200": {
250 |           "name":"方案一",
251 |           "keys":[2000,2004,2005]
252 |         },
253 |         "201":{
254 |           "name":"方案二",
255 |           "keys":[2002,2004,2005]
256 |         }
257 |       }
258 |     },
259 |     "findItem":{
260 |       "2000":{
261 |           "controlId": 100,
262 |           "colName": "personId",
263 |           "controlType": 101,
264 |           "class": "",
265 |           "placeholder": "工号",
266 |           "title": "工号",
267 |           "size": 10,
268 |           "maxlength": 10,
269 |           "optionList": [],
270 |           "tdCount":1
271 |       },
272 |       "2001":{
273 |           "controlId": "2001",
274 |           "colName": "personName",
275 |           "controlType": 101,
276 |           "isClear": true,
277 |           "disabled": false,
278 |           "required": true,
279 |           "readonly": false,
280 |           "pattern": "",
281 |           "class": "",
282 |           "placeholder": "员工姓名",
283 |           "title": "姓名",
284 |           "autocomplete": "on",
285 |           "size": 10,
286 |           "maxlength": "50",
287 |           "tdCount":1
288 |       },
289 |       "2002": {
290 |           "controlId": 2002,
291 |           "colName": "Gender",
292 |           "controlType": 183,
293 |           "isClear": true,
294 |           "disabled": false,
295 |           "required": true,
296 |           "readonly": false,
297 |           "pattern": "",
298 |           "class": "",
299 |           "title": "性别",
300 |           "optionList": [
301 |             { "value": "男", "title": "男" },
302 |             { "value": "女", "title": "女" }
303 |           ],
304 |           "tdCount":3
305 |       },
306 |       "2003":{
307 |           "controlId": "2012",
308 |           "colName": "nation",
309 |           "controlType": 106,
310 |           "isClear": true,
311 |           "disabled": false,
312 |           "required": true,
313 |           "readonly": false,
314 |           "pattern": "",
315 |           "class": "",
316 |           "placeholder": "员工姓名",
317 |           "title": "民族",
318 |           "optionKey": "minzu",
319 |           "optionList": [
320 |               { "value": 1, "title": "汉" },
321 |               { "value": 2, "title": "蒙古" },
322 |               { "value": 3, "title": "满族" },
323 |               { "value": 4, "title": "回族" },
324 |               { "value": 5, "title": "朝鲜" }
325 |           ]
326 |       },
327 |       "2004":{
328 |           "controlId": "2012",
329 |           "colName": "education",
330 |           "controlType": 190,
331 |           "isClear": true,
332 |           "disabled": false,
333 |           "required": true,
334 |           "readonly": false,
335 |           "pattern": "",
336 |           "class": "",
337 |           "placeholder": "学历",
338 |           "title": "学历",
339 |           "optionList": [
340 |               { "value": 1, "title": "高中" },
341 |               { "value": 2, "title": "大专" },
342 |               { "value": 3, "title": "本科" },
343 |               { "value": 4, "title": "硕士" },
344 |               { "value": 5, "title": "博士" }
345 |           ],
346 |           "tdCount":1
347 |       },
348 |       "2005":{
349 |           "controlId": 100,
350 |           "colName": "hobby",
351 |           "controlType": 182,
352 |           "isClear": true,
353 |           "disabled": false,
354 |           "required": true,
355 |           "readonly": false,
356 |           "pattern": "",
357 |           "class": "",
358 |           "title": "爱好",
359 |           "optionList": [
360 |             { "value": 1, "title": "篮球" },
361 |             { "value": 2, "title": "足球" },
362 |             { "value": 3, "title": "排球" }
363 |           ],
364 |           "tdCount":3
365 |       }
366 |     }
367 |   }
368 | }


--------------------------------------------------------------------------------
/cnd/project-axios/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/project-axios/public/favicon.ico


--------------------------------------------------------------------------------
/cnd/project-axios/src/app.js:
--------------------------------------------------------------------------------
 1 |   
 2 |   // vue3的对象
 3 |   const App = {
 4 |     setup() { // 传说中的setup
 5 |      
 6 |       const store = Vuex.useStore()
 7 |       // 状态的控制事件
 8 |       const setCount = () =>{
 9 |         store.commit('setCount')
10 |       }
11 | 
12 |       return {  // 返回给模板，否则模板访问不到。
13 |         setCount
14 |       }
15 |     }
16 |   }
17 | 
18 |   export default App
19 | 


--------------------------------------------------------------------------------
/cnd/project-axios/src/component/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       尝试一下vue文件，目前没找到方法，也许需要Babel和webpack。
 6 |     </p>
 7 |     
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: 'HelloWorld',
14 |   props: {
15 |     msg: String
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/cnd/project-axios/src/component/test.js:
--------------------------------------------------------------------------------
 1 | const test = {
 2 |     template: `
 3 |         这是 组件测试<br>
 4 |         参数：{{str1}}<br>
 5 |     `,
 6 |     model: {
 7 |       prop: ['str']
 8 |     },
 9 |     props: {
10 |       str: String
11 |     },
12 |     setup(props) {
13 |       // 在setup里面获取参数值
14 |       const str1 = Vue.ref(props.str)
15 |      
16 |       return {
17 |         str1
18 |       }
19 |     }
20 |   }
21 | 
22 |   export default test


--------------------------------------------------------------------------------
/cnd/project-axios/src/main.js:
--------------------------------------------------------------------------------
 1 | import store from './store/index.js?v=6'
 2 | import router from './router/index.js?v=8'
 3 | import App from './app.js?v=6'
 4 | 
 5 | // 创建vue3的实例
 6 | const app = Vue.createApp(App)
 7 |   .use(store) // 挂载vuex
 8 |   .use(router) // 挂载路由
 9 |   .use(ElementPlus) // 加载ElementPlus
10 |   .mount('#app') // 挂载Vue的app实例
11 | 
12 | 


--------------------------------------------------------------------------------
/cnd/project-axios/src/router/index.js:
--------------------------------------------------------------------------------
 1 | // import Home from '../views/home.js?v=2'
 2 | 
 3 | const routes = [
 4 |   {
 5 |     path: '/',
 6 |     name: 'Home',
 7 |     component: () => import('../views/home.js?v=8')
 8 |   },
 9 |   {
10 |     path: '/state',
11 |     name: 'state',
12 |     component: () => import('../views/state.js?v=8')
13 |   },
14 |   {
15 |     path: '/component',
16 |     name: 'component',
17 |     component: () => import('../views/component.js?v=8')
18 |   }
19 | ]
20 | 
21 | const router = VueRouter.createRouter({
22 |   history: VueRouter.createWebHistory(),
23 |   routes
24 | })
25 | 
26 | export default router
27 | 


--------------------------------------------------------------------------------
/cnd/project-axios/src/store/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default Vuex.createStore({
 3 |   state: {
 4 |     count: 0,
 5 |     myObject: {
 6 |       time: '现在的时间'
 7 |     }
 8 |   },
 9 |   getters: {
10 |     getCount: (state) => {
11 |       return state.count
12 |     },
13 |     getMyObject: (state) => {
14 |       return Vue.readonly(state.myObject)
15 |     },
16 |     getTime: (state) => {
17 |       return state.myObject.time
18 |     }
19 |   },
20 |   mutations: {
21 |     setCount(state) {
22 |       state.count++
23 |     },
24 |     setTime(state) {
25 |       state.myObject.time = '现在时间：' + new Date()
26 |     }
27 |   },
28 |   actions: {
29 |   },
30 |   modules: {
31 |   }
32 | })
33 | 


--------------------------------------------------------------------------------
/cnd/project-axios/src/views/component.js:
--------------------------------------------------------------------------------
 1 | // 引入组件
 2 | import test from '../component/test.js?v=7'
 3 | 
 4 | const demo = {
 5 |     template: `
 6 |         <h2>这是组件演示</h2>
 7 |         <test str="传入的参数"></test>
 8 |     `,
 9 |     components: {
10 |       test
11 |     },
12 |     setup() {
13 | 
14 |       return {
15 |       }
16 |     }
17 |   }
18 | 
19 |   export default demo


--------------------------------------------------------------------------------
/cnd/project-axios/src/views/home.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const testManage = () => {
 3 |   const hello = Vue.ref('你好，世界')
 4 |   const clickMe = () => {
 5 |     hello.value = '好的，收到' + new Date().valueOf()
 6 |   }
 7 | 
 8 |   return {
 9 |     hello,
10 |     clickMe
11 |   }
12 | }
13 | 
14 | // vue3的对象
15 | const home = {
16 |     template: `
17 |         <h2>这是home</h2>
18 |         <div>
19 |           我是{{value.name}}。<br>
20 |           老规矩：{{hello}}<br>
21 |           <input type="button" value="快点我" @click="clickMe"/><br><br>
22 |           本项目采用“混合”模式开发，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
23 |           vue全家桶和UI库用script标签加载。<br>
24 |           代码用import方式加载。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
25 |           目录结构参考了cli建立的项目。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
26 |           支持组件、路由、状态管理等功能。&nbsp;<br>
27 |           状态计数：{{$store.state.count}}&nbsp;&nbsp;&nbsp;
28 |         </div>
29 |     `,
30 |     setup() { // 传说中的setup
31 |       // 使用外面的定义，分解setup内部的代码
32 |       const { hello, clickMe } = testManage()
33 | 
34 |       const value = Vue.reactive({
35 |         name: 'jyk'
36 |       })
37 | 
38 |     
39 |       return {
40 |         value,
41 |         hello,
42 |         clickMe
43 |       }
44 |     }
45 |   }
46 | 
47 |   export default home


--------------------------------------------------------------------------------
/cnd/project-axios/src/views/state.js:
--------------------------------------------------------------------------------
 1 | // vue3的对象
 2 | const demo = {
 3 |     template: `
 4 |         <h2>这里是状态演示</h2>
 5 |         setup 里面的 count：{{count}}<br>
 6 |     `,
 7 |     setup() { // 传说中的setup
 8 |       const store = Vuex.useStore()
 9 |       // 在代码里面获取状态
10 |       const count = Vue.computed(() => store.getters.getCount)
11 | 
12 |       return {
13 |         count
14 |       }
15 |     }
16 |   }
17 | 
18 |   export default demo


--------------------------------------------------------------------------------
/cnd/project-axios/vuex.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     vuex 的尝试 <br>
 4 |     test: {{test}}<br>
 5 |     computedVuex: {{computedVuex}}<br>
 6 |     get2: {{get2}}<br>
 7 |     get: {{get}}<br>
 8 |     myRef: {{myRef2}}<br>
 9 |     $store：{{$store}}<br>
10 |     <input type="button" @click="add()" value="计数++"> <br>
11 |     <input type="button" @click="setItem('bbb')" value="修改 name 的值"> <br>
12 |     <vuexTest/>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import { ref, computed, getCurrentInstance } from 'vue'
18 | import vuexTest from './vuex2'
19 | 
20 | // @ is an alias to /src
21 | 
22 | export default {
23 |   name: 'vuex1',
24 |   components: {
25 |     vuexTest
26 |   },
27 |   setup (props, context) {
28 |     const test = ref('vuex') // 显示值
29 | 
30 |     const { ctx } = getCurrentInstance()
31 |     console.log('ctx', ctx)
32 |     console.log('vuex1', ctx.$store.state.count)
33 |     const computedVuex = computed(() => ctx.$store.state.count)
34 |     console.log('computedVuex', computedVuex)
35 | 
36 |     // set 设置值
37 |     const cc = ctx.$store.commit('increment')
38 |     console.log('cc', cc)
39 |     console.log('vuex2', ctx.$store.state.count)
40 | 
41 |     const get = ref('')
42 |     get.value = ctx.$store.getters.doneTodos
43 |     console.log('get', get)
44 | 
45 |     const get2 = ref('')
46 |     get2.value = ctx.$store.getters.getTodoById(3)
47 |     console.log('get2', get2)
48 | 
49 |     // ref 测试
50 |     const myRef = ctx.$store.myRef
51 |     console.log('myRef', myRef)
52 |     const myRef2 = ctx.$store.getters.setMyRef
53 |     console.log('myRef2', myRef2)
54 | 
55 |     const add = () => {
56 |       ctx.$store.commit('setMyRef', 3)
57 | 
58 |       ctx.$store.commit('increment', 3)
59 |       test.value = ctx.$store.state.count
60 |       console.log('pp:', ctx.$store.state.myPromies)
61 |       ctx.$store.state.myPromies.then((data) => {
62 |         alert(data)
63 |       })
64 |     }
65 | 
66 |     ctx.$store.dispatch('add1', 10).then((data) => {
67 |       // alert(data)
68 |     })
69 | 
70 |     return {
71 |       add,
72 |       computedVuex,
73 |       get,
74 |       myRef,
75 |       myRef2,
76 |       test
77 |     }
78 |   }
79 | 
80 | }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/cnd/project-axios/web.config:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <configuration>
 3 |     <system.webServer>
 4 |         <httpErrors errorMode="Custom">
 5 |             <remove statusCode="404" subStatusCode="-1" />
 6 |             <error statusCode="404" prefixLanguageFilePath="" path="/index.html" responseMode="ExecuteURL" />
 7 |         </httpErrors>
 8 |         <security>
 9 |             <requestFiltering>
10 |                 <fileExtensions>
11 |                     <add fileExtension=".vue" allowed="true" />
12 |                 </fileExtensions>
13 |             </requestFiltering>
14 |         </security>
15 |         <staticContent>
16 |             <mimeMap fileExtension=".vue" mimeType="text/html" />
17 |         </staticContent>
18 |     </system.webServer>
19 | </configuration>
20 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # 演示一下 vue3 的响应性和composition API
 3 | 
 4 | * vue3 的 reactive
 5 | * vue3 的 ref
 6 | * vue3 的 监听和计算属性
 7 | * vue3 的 composition API
 8 | 
 9 | 在线演示：  
10 | https://naturefwvue.github.io/nf-vue-cnd/cnd/project-compositionapi
11 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <link rel="icon" href="public/favicon.ico" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title> Vue3的 响应式 和 Composition API 的演示 </title>
  8 |   <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
  9 |   <script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
 10 |   <script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js"></script>
 11 |   <link href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css" rel="stylesheet">
 12 |   <script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></script>
 13 |   <!--axios-->
 14 |   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 15 |   <script type="text/javascript">
 16 |     // 假定 src 在网站根目录
 17 |     let basrUrl = '/src/' 
 18 |     // 判断所处网站，确定基础url
 19 |     switch (window.location.origin) {
 20 |       case 'https://naturefwvue.github.io': //github
 21 |         basrUrl = '/nf-vue-cnd/cnd/project-compositionapi/src/'
 22 |         break
 23 |     }
 24 |     window.__ver = '?v=1'
 25 |     window.__basrUrl = basrUrl
 26 |     // 定义全局常量
 27 |     // const personUrl = 'https://naturefwvue.github.io/nf-vue-cnd/cnd/project-compositionapi/src/views/reactive/person.js'
 28 |     const personUrl = './person.js'
 29 | 
 30 |   </script>
 31 | 
 32 |   <script type="text/javascript">
 33 |     // 封装一个异步加载动态组件的方法
 34 |     window.myImport = (url) => {
 35 |       return new Promise((resolve, reject) => {
 36 |         const ver = window.__ver
 37 |         const _url = window.__basrUrl + url
 38 |         // 先加载js
 39 |         import(_url + '.js' + ver).then((resjs) => {
 40 |           const js = resjs.default
 41 |           if (js.template === '') {
 42 |             // 如果模板是空的，表示需要加载html文件作为模板
 43 |             // 此处可以做缓存。
 44 |             axios
 45 |               .get(_url + '.html' + ver)
 46 |               .then((resHTML) => {
 47 |                 js.template = resHTML.data
 48 |                 resolve(js)
 49 |               })
 50 |           } else {
 51 |             // 否则直接使用js注册组件
 52 |             resolve(js)
 53 |           }
 54 |         })
 55 |       })
 56 |     }
 57 |   </script>
 58 |   <style>
 59 |     #app {
 60 |       font-family: Avenir, Helvetica, Arial, sans-serif;
 61 |       -webkit-font-smoothing: antialiased;
 62 |       -moz-osx-font-smoothing: grayscale;
 63 |       text-align: center;
 64 |       color: #2c3e50;
 65 |     }
 66 |     #nav {
 67 |       padding: 30px;
 68 |     }
 69 |     #nav a {
 70 |       font-weight: bold;
 71 |       color: #2c3e50;
 72 |     }
 73 |     #nav a.router-link-exact-active {
 74 |       color: #42b983;
 75 |     }
 76 |   </style>
 77 | </head>
 78 | <body>
 79 |   <div id="nav">
 80 |     演示一下 Vue3 的 Composition API 的各种用法。
 81 |     <a href="https://naturefwvue.github.io/nf-vue-cnd/cnd/project-template/">查看源码</a> 
 82 |     | 
 83 |     <a href="https://naturefwvue.github.io/nf-vue-cnd/cnd/project-compositionapi/">点这里刷新，别按F5</a>
 84 | 
 85 |     <br> 友情链接：
 86 |     <a href="https://naturefwvue.github.io/nf-vue-cnd/cnd/project-template/">CDN工程化的模板</a> | 
 87 |     <a href="https://naturefwvue.github.io/nf-vue-cnd/cnd/project-admin/">CDN工程化的admin</a> | 
 88 |     <a href="https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex/">状态管理演示</a> | 
 89 |     <a href="https://naturefwvue.github.io/nf-vue-cnd/cnd/project-compositionapi/">CompositionAPI演示</a> | 
 90 |     
 91 |   </div>
 92 |   <div id="app">
 93 |     <div id="nav">
 94 |       <p>
 95 |         <router-link :to="{name:'Home'}">首页</router-link>&nbsp;&nbsp;&nbsp;
 96 |         <router-link :to="{name:'reactive'}">reactive</router-link>&nbsp;&nbsp;&nbsp;
 97 |         <router-link :to="{name:'ref'}">ref</router-link>&nbsp;&nbsp;&nbsp;
 98 |         <router-link :to="{name:'store'}">setup</router-link>&nbsp;&nbsp;&nbsp;
 99 |         <router-link :to="{name:'look'}">监听和计算属性</router-link>&nbsp;&nbsp;&nbsp;
100 |         <router-link :to="{name:'store'}">生命周期</router-link>&nbsp;&nbsp;&nbsp;
101 |         <router-link :to="{name:'store'}">代码复用</router-link>&nbsp;&nbsp;&nbsp;
102 |       </p>
103 |       <hr>
104 |       <div style="text-align: left;margin-left: 100px;height: 450px;">
105 |         <router-view></router-view>
106 |       </div>
107 |     </div>
108 |     <hr>
109 |   
110 |   <script type="module">
111 |     // 加载文件的话，有时候会卡，不知道为啥卡。。。
112 |     const _url = window.__basrUrl
113 |     Promise.all([
114 |       import(_url + 'app.js' + __ver),
115 |       import(_url + 'store/index.js' + __ver),
116 |       import(_url + 'router/index.js' + __ver)
117 |     ]).then((res) => {
118 |       // 创建vue3的实例
119 |       const app = Vue.createApp(res[0].default)
120 |         .use(res[1].default) // 挂载vuex
121 |         .use(res[2].default) // 挂载路由
122 |         .use(ElementPlus) // 加载ElementPlus
123 |         .mount('#app') // 挂载Vue的app实例
124 |     })
125 | 
126 |   </script>
127 | </body>
128 | </html>
129 | 
130 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/project-compositionapi/public/favicon.ico


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/app.js:
--------------------------------------------------------------------------------
 1 |   
 2 |   // import { Set_Count, Set_Count_sy } from './store/mutation-types.js'
 3 | 
 4 | export default {
 5 |   name: 'app',
 6 |   setup() {
 7 |     const store = Vuex.useStore()
 8 | 
 9 |     // 状态的控制事件
10 |     const setCount = () =>{
11 |       store.commit('setCount')
12 |       store.commit('setTime')
13 |       store.commit('setArray')
14 |       // store._mutations.setCount[0] // 这是什么？
15 |     }
16 |   
17 |     return {
18 |       // 设置state
19 |       setCount
20 |     }
21 |   }
22 | }


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/components/test.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   <br>
3 |   这是 组件测试<br>
4 |   父组件传递参数：{{str}}<br>
5 |   setup 获取参数：{{str1}}<br>
6 | </div>


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/components/test.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'component-test',
 3 |   template: '',
 4 |   props: {
 5 |     str: String,
 6 |     obj: Object
 7 |   },
 8 |   setup(props) {
 9 |     // 在setup里面获取参数值
10 |     let str1 = Vue.ref(props.str)
11 |     str1.value += '--内部改一下。'
12 |     console.log('组件属性——props：', props)
13 |     console.log('组件属性——obj：', props.obj)
14 |     console.log('组件属性——props：', Vue.isReadonly(props))
15 |     console.log('组件属性——obj：', Vue.isReadonly(props.obj))
16 |    
17 |     return {
18 |       str1
19 |     }
20 |   }
21 | }


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/main.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | import store from './store/index.js?v=28'
 3 | import router from './router/index.js?v=28'
 4 | import App from './app.js?v=28'
 5 | 
 6 | 
 7 | // 创建vue3的实例
 8 | const app = Vue.createApp(App)
 9 |   .use(store) // 挂载vuex
10 |   .use(router) // 挂载路由
11 |   .use(ElementPlus) // 加载ElementPlus
12 |   .mount('#app') // 挂载Vue的app实例
13 | 
14 | */
15 | 
16 | const ver = window.__ver || ''
17 | 
18 | Promise.all([
19 |   import('./store/index.js' + ver),
20 |   import('./router/index.js' + ver),
21 |   import('./app.js' + ver),
22 | ]).then((res) => {
23 |   // 创建vue3的实例
24 |   const app = Vue.createApp(res[2].default)
25 |     .use(res[0].default) // 挂载vuex
26 |     .use(res[1].default) // 挂载路由
27 |     .use(ElementPlus) // 加载ElementPlus
28 |     .mount('#app') // 挂载Vue的app实例
29 | })
30 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/router/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const routes = [
 3 |   {
 4 |     path: '/',
 5 |     name: 'Home',
 6 |     component: () => myImport('views/home')
 7 |   },
 8 |   {
 9 |     path: '/reactive', /** reactive 的导航页面 */
10 |     name: 'reactive',
11 |     component: () => myImport('views/reactive/index'),
12 |     children: [
13 |       { // es6的Proxy
14 |         path: 'proxy',
15 |         name: 'ret-proxy',
16 |         component: () => myImport('views/reactive/proxy')
17 |       },
18 |       { // 用Proxy套个娃
19 |         path: 'proxy',
20 |         name: 'ret-proxy-reactive',
21 |         component: () => myImport('views/reactive/proxy-reactive')
22 |       },
23 |       { // reactive 响应式 
24 |         path: 'reactive',
25 |         name: 'ret-reactive',
26 |         component: () => myImport('views/reactive/reactive')
27 |       }, 
28 |       { // shallowReactive 响应式 
29 |         path: 'shallowReactive',
30 |         name: 'ret-reactive-shallow',
31 |         component: () => myImport('views/reactive/reactive-shallow')
32 |       }, 
33 |       { // readonly 只读
34 |         path: 'readonly',
35 |         name: 'ret-readonly',
36 |         component: () => myImport('views/reactive/readonly')
37 |       }, 
38 |       { // shallowReadonly 只读
39 |         path: 'shallowReadonly',
40 |         name: 'ret-readonly-shallow',
41 |         component: () => myImport('views/reactive/readonly-shallow')
42 |       }, 
43 |       { // toRaw
44 |         path: 'toRaw',
45 |         name: 'ret-toRaw',
46 |         component: () => myImport('views/reactive/toraw')
47 |       },
48 |       { // toRaw
49 |         path: 'MarkRaw',
50 |         name: 'ret-MarkRaw',
51 |         component: () => myImport('views/reactive/markraw')
52 |       },
53 |       {
54 |         path: 'let',
55 |         name: 'ret-let',
56 |         component: () => myImport('views/reactive/let')
57 |       },
58 |       { // 验证对象类型
59 |         path: 'check',
60 |         name: 'ret-check',
61 |         component: () => myImport('views/reactive/check')
62 |       }
63 |       
64 |     ]
65 |   },
66 |   {
67 |     path: '/ref',
68 |     name: 'ref',
69 |     component: () => myImport('views/component')
70 |   },
71 |   {
72 |     path: '/look',
73 |     name: 'look',
74 |     component: () => myImport('views/look/index'),
75 |     children: [
76 |       { // es6的Proxy
77 |         path: 'watch',
78 |         name: 'look-watch',
79 |         component: () => myImport('views/look/watch')
80 |       }
81 |     ]
82 |   },
83 |   {
84 |     path: '/store',
85 |     name: 'store',
86 |     component: () => myImport('views/store')
87 |   }
88 | ]
89 | 
90 | const router = VueRouter.createRouter({
91 |   history: VueRouter.createWebHistory(),
92 |   routes
93 | })
94 | 
95 | export default router
96 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/script/appImport.js:
--------------------------------------------------------------------------------
 1 | // 直接放在Window里面好了。。。
 2 | window.myImport = (url) => {
 3 |   return new Promise((resolve, reject) => {
 4 |     const ver = window.__ver || ''
 5 |     const baseUrl = window.__basrUrl || '/src/'
 6 |     // 先加载js
 7 |     import(baseUrl + url + '.js' + ver).then((resjs) => {
 8 |       const js = resjs.default
 9 |       if (js.template === '') {
10 |         // 如果模板是空的，表示需要加载html作为模板
11 |         axios.get(baseUrl + url + '.html' + ver).then((resHTML) => {
12 |           js.template = resHTML.data
13 |           resolve(js)
14 |         })
15 |       } else {
16 |         // 否则直接使用js注册组件
17 |         resolve(js)
18 |       }
19 |     })
20 |   })
21 | }
22 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/script/nf-indexedDB.config.js:
--------------------------------------------------------------------------------
 1 | const config = {
 2 |   dbName: 'dbTest-reactive',
 3 |   ver: 1,
 4 |   debug: true,
 5 |   objectStores: [ // 建库依据
 6 |     {
 7 |       objectStoreName: 'reactive'
 8 |     }
 9 |   ]
10 | }
11 | 
12 | export default config
13 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/store/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { Set_Count } from './mutation-types.js'
 3 | 
 4 | export default Vuex.createStore({
 5 |   state: {
 6 |     // 表单弹窗的状态
 7 |     formState: {
 8 |       editState: 'add', // 编辑状态，add：添加；update：修改；show ：只读显示
 9 |       id: 0, // 0：添加；其他：要修改或者显示的数据的ID
10 |       isOpen: false, // 是否打开弹窗（模态）
11 |       model: {} // 这里只是演示异步加载，实际项目中并不适合这么做
12 |     }
13 |   },
14 |   mutations: {
15 |     // 改变表单弹窗的状态
16 |     setFormState(state, form) {
17 |       // 可以设置单独的属性，这里偷懒了。
18 |       Object.assign(state.formState, form)
19 |     }
20 |   },
21 |   modules: {
22 |   }
23 | })
24 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/store/map-form.js:
--------------------------------------------------------------------------------
 1 | const mapForm = () => {
 2 |   const store = Vuex.useStore()
 3 |   const readonly = Vue.readonly
 4 | 
 5 |   // 返回可读可写的表单弹窗状态
 6 |   const formState = () => {
 7 |     return store.state.formState
 8 |   }
 9 | 
10 |   // 返回只读的表单弹窗状态
11 |   const getFormState = () => {
12 |     return readonly(store.state.formState)
13 |   }
14 | 
15 |   // 打开弹窗
16 |   const openForm = () =>{
17 |     store.commit('setFormState', { isOpen: true})
18 |   }
19 | 
20 |   // 打开弹窗
21 |   const closeForm = () =>{
22 |     store.commit('setFormState', { isOpen: false})
23 |   }
24 | 
25 |   // 设置添加数据
26 |   const addData = () =>{
27 |     store.commit('setFormState', { 
28 |       isOpen: true,
29 |       id: 0,
30 |       editState: 'add'
31 |     })
32 |   }
33 | 
34 |   // 设置修改状态
35 |   const updateData = (id) =>{
36 |     store.commit('setFormState', { 
37 |       isOpen: true,
38 |       id: id,
39 |       editState: 'update'
40 |     })
41 |   }
42 | 
43 |   // 设置只读状态
44 |   const showData = (id) =>{
45 |     store.commit('setFormState', { 
46 |       isOpen: true,
47 |       id: id,
48 |       editState: 'show'
49 |     })
50 |   }
51 | 
52 |   // 异步获取数据
53 |   const loadData = (id) =>{
54 |     return new Promise((resolve, reject) => {
55 |       setTimeout(() => {
56 |         store.commit('setFormState', { 
57 |           model: {
58 |             title: '假装异步获取了数据'
59 |           }
60 |         })
61 |         resolve('成功了！') 
62 |       }, 1000);
63 |     })
64 |     
65 |   }
66 | 
67 |   return {
68 |     formState, // 可读写状态
69 |     getFormState, // 只读状态
70 |     openForm, // 打开弹窗
71 |     closeForm, // 关闭弹窗
72 |     addData, // 添加新纪录并且打开弹窗
73 |     updateData, // 修改记录并且打开弹窗
74 |     showData, // 显示数据并且打开弹窗
75 |     loadData // 异步加载数据
76 |   }
77 |   
78 | }
79 | 
80 | export default mapForm


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/store/map.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const map = () => {
 3 |   const store = Vuex.useStore()
 4 |     
 5 |   /**
 6 |   * 获取count，
 7 |   * 用computed实现相应
 8 |   */
 9 |   const getCount = () => {
10 |     return Vue.computed(() => store.state.count)
11 |   }
12 | 
13 |   /**
14 |   * 获取count，
15 |   ** 用 ref 实现相应
16 |   */
17 |   const getRefCount = () => {
18 |     return Vue.ref(store.state.count)
19 |   }
20 | 
21 |   /**
22 |   * 获取对象
23 |   */
24 |   const getObject = () => {
25 |     return store.state.myObject
26 |   }
27 | 
28 |   /**
29 |   * 获取只读对象
30 |   */
31 |   const getReadonlyObject = () => {
32 |     return Vue.readonly(store.state.myObject)
33 |   }
34 | 
35 |   /**
36 |   * 获取数组
37 |   */
38 |   const getArray = () => {
39 |     return store.state.myArray
40 |   }
41 |   /**
42 |   * 获取只读数组
43 |   */
44 |   const getReadonlyArray = () => {
45 |     return Vue.readonly(store.state.myArray)
46 |   }
47 | 
48 |   /**
49 |   * 查询数组
50 |   ** id：要查询的数据
51 |   */
52 |   const filterArray = (id) => {
53 |     return  Vue.computed(() => store.getters.filterArray(id))
54 |   }
55 | 
56 |   return {
57 |     getCount,
58 |     getRefCount,
59 |     getObject,
60 |     getReadonlyObject,
61 |     getArray,
62 |     getReadonlyArray,
63 |     filterArray
64 |   }
65 | 
66 | }
67 | 
68 | export default map


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/store/mutation-types.js:
--------------------------------------------------------------------------------
1 | export const Set_Count = 'set_count'
2 | export const Set_Count_sy = Symbol('set_count')
3 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/component.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   演示一下组件里面使用组件的方式<br>
3 |   <test :str="value"></test>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/component.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     name: 'template',
 3 |     template: ``,
 4 |     components: {
 5 |       test: Vue.defineAsyncComponent(
 6 |         () => myImport('components/test')
 7 |       )
 8 |     },
 9 |     setup () {
10 |       const value = Vue.ref('传入组件的参数')
11 |       return {
12 |         value
13 |       }
14 |     }
15 |   }
16 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/home.js:
--------------------------------------------------------------------------------
 1 | const { ref, reactive } = Vue
 2 | 
 3 | const testManage = () => {
 4 |   const hello = ref('你好，世界')
 5 |   const clickMe = () => {
 6 |     hello.value = '好的，收到，现在时间：' + new Date()
 7 |   }
 8 | 
 9 |   return {
10 |     hello,
11 |     clickMe
12 |   }
13 | }
14 | 
15 | // vue3的对象
16 | export default {
17 |   template: `
18 |       <h2>我是 {{value.name}}</h2>
19 |       <div>
20 |         老规矩：{{hello}}<br>
21 |         <el-button type="primary" @click="clickMe">快点我</el-button><br>
22 |         <br>
23 |         这里演示 Vue3 的 响应式 和 composition API 的各种用法
24 |       </div>
25 |   `,
26 |   setup() {
27 |     // 使用外面的定义，分解setup内部的代码
28 |     const { hello, clickMe } = testManage()
29 | 
30 |     const value = reactive({
31 |       name: 'jyk'
32 |     })
33 | 
34 |   
35 |     return {
36 |       value,
37 |       hello,
38 |       clickMe
39 |     }
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/look/index.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   <el-row >
 3 |     <el-col :span="4">
 4 |       <router-link :to="{name:'look-watch'}">watch</router-link><br><br>
 5 |     
 6 |     </el-col>
 7 |     <el-col :span="19">
 8 |       <router-view></router-view>
 9 |       <hr>
10 |     </el-col>
11 |   </el-row>
12 | </div>
13 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/look/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | /**
 4 |  * 监听和计算属性
 5 | */
 6 | export default {
 7 |   name: 'look',
 8 |   template: '',
 9 |   setup () {
10 |     const value = Vue.ref('数据绑定的演示')
11 | 
12 |     return {
13 |       value
14 |     }
15 |   }
16 | }
17 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/look/watch.js:
--------------------------------------------------------------------------------
 1 | const watch = Vue.watch
 2 | 
 3 | import { person, personReactive, objectReactive } from '../reactive/person.js'
 4 | 
 5 | /**
 6 |  * watch 监听
 7 |  * 
 8 | */
 9 | export default {
10 |   name: 'watch-watch',
11 |   template: `
12 |     <div>
13 |       展示 watch <br>
14 |       js 对象：{{ personReactive }} <br><br>
15 | 
16 |       <el-button @click="update" type="primary">修改属性</el-button><br><br>
17 |     </div>
18 |   `,
19 |   setup () {
20 |     // 查看 reactive 实例结构
21 |     console.log('reactive', personReactive)
22 |     // 获取嵌套对象属性
23 | 
24 |     // 监听属性
25 |     watch(() =>  personReactive.name, (v1,v2) => {
26 |       console.log('name改变了', v1)
27 |     })
28 | 
29 |     // 监听对象
30 |     watch(() =>  personReactive, (v1,v2) => {
31 |       console.log('改变了', v1)
32 |     },
33 |     {
34 |       deep:true
35 |     })
36 | 
37 |     const update = () => {
38 |       personReactive.name = '改变' + Math.random()
39 |       personReactive.contacts.QQ = Math.random()
40 |     }
41 | 
42 |     return {
43 |       person, // js对象
44 |       personReactive, // perosn 套上 reactive
45 |       objectReactive, // {} 套上 reactive
46 |       update // 修改属性
47 |     }
48 |   }
49 | }
50 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/check.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   验证类型函数<br>
 3 |   <el-row>
 4 |     <el-col :span="7"> 待验证类型 </el-col>
 5 |     <el-col :span="5"> isProxy </el-col>
 6 |     <el-col :span="5"> isReactive </el-col>
 7 |     <el-col :span="5"> isReadonly </el-col>
 8 |   </el-row>
 9 |   <el-row>
10 |     <el-col :span="7"> object </el-col>
11 |     <el-col :span="5"> {{obj.check1}} </el-col>
12 |     <el-col :span="5"> {{obj.check2}} </el-col>
13 |     <el-col :span="5"> {{obj.check3}} </el-col>
14 |   </el-row>
15 |   <el-row>
16 |     <el-col :span="7"> 自定义Proxy (object) </el-col>
17 |     <el-col :span="5"> {{myproxy.check1}} </el-col>
18 |     <el-col :span="5"> {{myproxy.check2}} </el-col>
19 |     <el-col :span="5"> {{myproxy.check3}} </el-col>
20 |   </el-row>
21 |   <el-row>
22 |     <el-col :span="7"> 自定义Proxy (Reactive) </el-col>
23 |     <el-col :span="5"> {{myproxyReactive.check1}} </el-col>
24 |     <el-col :span="5"> {{myproxyReactive.check2}} </el-col>
25 |     <el-col :span="5"> {{myproxyReactive.check3}} </el-col>
26 |   </el-row>
27 |   <!--对象的reactive-->
28 |   <el-row>
29 |     <el-col :span="7"> reactive (object) </el-col>
30 |     <el-col :span="5"> {{reto.check1}} </el-col>
31 |     <el-col :span="5"> {{reto.check2}} </el-col>
32 |     <el-col :span="5"> {{reto.check3}} </el-col>
33 |   </el-row>
34 |   <!--数组的reactive
35 |   <el-row>
36 |     <el-col :span="7"> reactive (array) </el-col>
37 |     <el-col :span="5"> {{reta.check1}} </el-col>
38 |     <el-col :span="5"> {{reta.check2}} </el-col>
39 |     <el-col :span="5"> {{reta.check3}} </el-col>
40 |   </el-row>-->
41 |   <!--浅层响应-->
42 |   <el-row>
43 |     <el-col :span="7"> shallowReactive (object) </el-col>
44 |     <el-col :span="5"> {{shallowRetObj.check1}} </el-col>
45 |     <el-col :span="5"> {{shallowRetObj.check2}} </el-col>
46 |     <el-col :span="5"> {{shallowRetObj.check3}} </el-col>
47 |   </el-row>
48 |   <el-row>
49 |     <el-col :span="7"> shallowReactive (Reactive) </el-col>
50 |     <el-col :span="5"> {{shallowRetRet.check1}} </el-col>
51 |     <el-col :span="5"> {{shallowRetRet.check2}} </el-col>
52 |     <el-col :span="5"> {{shallowRetRet.check3}} </el-col>
53 |   </el-row>
54 |   <!--深层只读-->
55 |   <el-row>
56 |     <el-col :span="7"> readonly (object) </el-col>
57 |     <el-col :span="5"> {{readObj.check1}} </el-col>
58 |     <el-col :span="5"> {{readObj.check2}} </el-col>
59 |     <el-col :span="5"> {{readObj.check3}} </el-col>
60 |   </el-row>
61 |   <el-row>
62 |     <el-col :span="7"> readonly (Reactive) </el-col>
63 |     <el-col :span="5"> {{readRet.check1}} </el-col>
64 |     <el-col :span="5"> {{readRet.check2}} </el-col>
65 |     <el-col :span="5"> {{readRet.check3}} </el-col>
66 |   </el-row>
67 |   <!--浅层只读-->
68 |   <el-row>
69 |     <el-col :span="7"> shallowReadonly (object) </el-col>
70 |     <el-col :span="5"> {{shallowReadObj.check1}} </el-col>
71 |     <el-col :span="5"> {{shallowReadObj.check2}} </el-col>
72 |     <el-col :span="5"> {{shallowReadObj.check3}} </el-col>
73 |   </el-row>
74 |   <el-row>
75 |     <el-col :span="7"> shallowReadonly (Reactive) </el-col>
76 |     <el-col :span="5"> {{shallowReadRet.check1}} </el-col>
77 |     <el-col :span="5"> {{shallowReadRet.check2}} </el-col>
78 |     <el-col :span="5"> {{shallowReadRet.check3}} </el-col>
79 |   </el-row>
80 | 
81 | </div>
82 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/check.js:
--------------------------------------------------------------------------------
  1 | const isProxy = Vue.isProxy
  2 | const isReactive = Vue.isReactive
  3 | const isReadonly = Vue.isReadonly
  4 | const toRaw = Vue.toRaw
  5 | 
  6 | import { 
  7 |   person, // object 对象
  8 |   personReactive, // object  的 reactive 代理
  9 |   // 深层读写
 10 |   objectReactive, // reactive （object）
 11 |   // 浅层读写
 12 |   objectShallowReactive, // 浅层 代理
 13 |   // 浅层 reactive 的读写
 14 |   retShallowReactive, 
 15 |   // 浅层只读
 16 |   objectShallowReadonly, // 浅层只读 object
 17 |   reactiveShallowReadonly, // 浅层只读 reactive
 18 |   // 深层只读
 19 |   objectReadonly , // 深层只读 object
 20 |   reactiveReadonly // 深层只读 reactive
 21 | } from './person.js?v=1'
 22 | 
 23 | const myProxy = (obj) => {
 24 |   const pp = new Proxy(obj, {
 25 |     get: function (target, key, receiver) {
 26 |       if (typeof key !== 'symbol') {
 27 |         console.log(`getting ${key}!`, target[key])
 28 |       } else {
 29 |         console.log('getting symbol:', key, target[key])
 30 |       }
 31 |       return Reflect.get(target, key, receiver)
 32 |     },
 33 |     set: function (target, key, value, receiver) {
 34 |       console.log(`setting ${key}：${value}!`)
 35 |       return Reflect.set(target, key, value, receiver)
 36 |     }
 37 |   })
 38 |   return pp
 39 | }
 40 | 
 41 | /**
 42 |  * 验证类型
 43 |  * isPoxy、isReactive、isReadonly做对比测试
 44 | */
 45 | export default {
 46 |   name: 'reactive-check',
 47 |   template: ``,
 48 |   setup () {
 49 | 
 50 |     const myProxyObject = myProxy({title:'222', __v_isReactive: true})
 51 |     console.log('myProxyObject', myProxyObject)
 52 |     const myProxyReactive = myProxy(objectReactive)
 53 |     console.log('myProxyReactive', myProxyReactive)
 54 | 
 55 |     // 试一试 __v_isReadonly
 56 |     console.log('objectReactive', objectReactive)
 57 |     console.log('__v_isReadonly'
 58 |       , objectReactive.__v_isReadonly
 59 |       , objectReactive.__v_isReactive
 60 |       )
 61 | 
 62 |     // 取原型
 63 |     const raw = toRaw(myProxyReactive)
 64 |     console.log('自己定义的Proxy取原型', raw)
 65 | 
 66 |     return {
 67 |       obj: { // js对象
 68 |         check1: isProxy(person),
 69 |         check2: isReactive(person),
 70 |         check3: isReadonly(person)
 71 |       },
 72 |       myproxy: { // 自己定义的Proxy object
 73 |         check1: isProxy(myProxyObject),
 74 |         check2: isReactive(myProxyObject),
 75 |         check3: isReadonly(myProxyObject)
 76 |       },
 77 |       myproxyReactive: { // 自己定义的Proxy reactive
 78 |         check1: isProxy(myProxyReactive),
 79 |         check2: isReactive(myProxyReactive),
 80 |         check3: isReadonly(myProxyReactive)
 81 |       },
 82 |       // 深层响应  reactive（object）
 83 |       reto: { // reactive（object）
 84 |         check1: isProxy(objectReactive),
 85 |         check2: isReactive(objectReactive),
 86 |         check3: isReadonly(objectReactive)
 87 |       },
 88 |       // 浅层响应 参数：object
 89 |       shallowRetObj: {
 90 |         check1: isProxy(objectShallowReactive),
 91 |         check2: isReactive(objectShallowReactive),
 92 |         check3: isReadonly(objectShallowReactive)
 93 |       },
 94 |       // 浅层响应 参数：reactive
 95 |       shallowRetRet: {
 96 |         check1: isProxy(retShallowReactive),
 97 |         check2: isReactive(retShallowReactive),
 98 |         check3: isReadonly(retShallowReactive)
 99 |       },
100 | 
101 |       // 深层只读，参数 object =======================
102 |       readObj: { // readonly object
103 |         check1: isProxy(objectReadonly),
104 |         check2: isReactive(objectReadonly),
105 |         check3: isReadonly(objectReadonly)
106 |       },
107 |       // 深层只读，参数 reactive
108 |       readRet: { // readonly reactive
109 |         check1: isProxy(reactiveReadonly),
110 |         check2: isReactive(reactiveReadonly),
111 |         check3: isReadonly(reactiveReadonly)
112 |       },
113 |       // 浅层只读 参数：object
114 |       shallowReadObj: {
115 |         check1: isProxy(objectShallowReadonly),
116 |         check2: isReactive(objectShallowReadonly),
117 |         check3: isReadonly(objectShallowReadonly)
118 |       },
119 |       // 浅层只读 参数：reactive
120 |       shallowReadRet: {
121 |         check1: isProxy(reactiveShallowReadonly),
122 |         check2: isReactive(reactiveShallowReadonly),
123 |         check3: isReadonly(reactiveShallowReadonly)
124 |       },
125 |       person
126 |     }
127 |   }
128 | }
129 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/index.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   <el-row >
 3 |     <el-col :span="4">
 4 |       <router-link :to="{name:'ret-proxy'}">ES6的Proxy</router-link><br><br>
 5 |       <router-link :to="{name:'ret-proxy-reactive'}">用Proxy套个娃</router-link><br><br>
 6 |       <router-link :to="{name:'ret-reactive'}">reactive</router-link><br><br>
 7 |       <router-link :to="{name:'ret-reactive-shallow'}">shallowReactive</router-link><br><br>
 8 |       <router-link :to="{name:'ret-MarkRaw'}">MarkRaw</router-link><br><br>
 9 |       <router-link :to="{name:'ret-readonly'}">readonly</router-link><br><br>
10 |       <router-link :to="{name:'ret-readonly-shallow'}">shallowReadonly</router-link><br><br>
11 |       <router-link :to="{name:'ret-toRaw'}">toRaw取原型</router-link><br><br>
12 |       <router-link :to="{name:'ret-check'}">判断类型</router-link><br><br>
13 |       <router-link :to="{name:'ret-let'}">响应性测试</router-link><br><br>
14 |     
15 |     </el-col>
16 |     <el-col :span="19">
17 |       <router-view></router-view>
18 |     </el-col>
19 |   </el-row>
20 | </div>
21 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * reactive的导航页面
 4 |  * 1、定义reactive看效果
 5 |  * 2、只读模式
 6 |  * 3、类型判断
 7 |  * 4、响应性测试
 8 | */
 9 | export default {
10 |   name: 'reactive',
11 |   template: '',
12 |   setup () {
13 |     const value = Vue.ref('数据绑定的演示')
14 | 
15 |     return {
16 |       value
17 |     }
18 |   }
19 | }
20 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/let.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   展示reactive的定义
3 | </div>
4 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/let.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     name: 'About',
 3 |     template: '',
 4 |     setup () {
 5 |       const value = Vue.ref('数据绑定的演示')
 6 |    
 7 |       return {
 8 |         value
 9 |       }
10 |     }
11 |   }
12 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/markraw.js:
--------------------------------------------------------------------------------
 1 | const reactive = Vue.reactive
 2 | const markRaw = Vue.markRaw
 3 | 
 4 | const testmarkRaw = () => {
 5 |   // js对象
 6 |   const object = markRaw({
 7 |     name: 'jyk',
 8 |     age: 18,
 9 |     contacts: {
10 |       QQ: 11111,
11 |       phone: 123456789
12 |     }
13 |   })
14 | 
15 |   // reactive的对象
16 |   const retObject1 = reactive({
17 |     name: object.name
18 |   })
19 | 
20 |   const retObject2 = reactive(object)
21 | 
22 |   return {
23 |     object,
24 |     retObject1,
25 |     retObject2
26 |   }
27 | }
28 | 
29 | /**
30 |  * MarkRaw 做个标记，不响应。
31 |  * 自己定义一个Proxy，看看效果
32 | */
33 | export default {
34 |   name: 'reactive-Proxy',
35 |   components: {
36 |     test: Vue.defineAsyncComponent(() => myImport('components/test'))
37 |   },
38 |   template: `
39 |     <div>
40 |       markRaw 标记 <br>
41 |       retObject1：{{retObject1}} <br><br>
42 |       <test :obj="object"/>11
43 |       <el-button @click="update" type="primary">修改状态</el-button>
44 |     </div>
45 |   `,
46 |   setup () {
47 |     const {
48 |       object,
49 |       retObject1,
50 |       retObject2
51 |     } = testmarkRaw()
52 | 
53 |     console.log('作为初始值：', retObject1)
54 |     console.log('无法变成响应式：', retObject2)
55 | 
56 |     // 修改数据
57 |     const update = () => {
58 |       // 新增属性
59 |       // myProxyReactive['new'] = '这是一个新属性' + Math.random()
60 |     }
61 |     
62 |     return {
63 |       object,
64 |       retObject1,
65 |       retObject2,
66 |       update
67 |     }
68 |   }
69 | }
70 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/person.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const reactive = Vue.reactive
 3 | const shallowReactive = Vue.shallowReactive
 4 | const readonly = Vue.readonly
 5 | const shallowReadonly = Vue.shallowReadonly
 6 | 
 7 | /**
 8 |  * 普通js对象的 person
 9 |  */
10 | export const person = {
11 |   name: 'jyk',
12 |   age: 18,
13 |   contacts: {
14 |     QQ: 11111,
15 |     phone: 123456789
16 |   }
17 | }
18 | 
19 | /**
20 |  * person 的 reactive 代理
21 |  */
22 | export const personReactive = reactive(person)
23 | 
24 | /**
25 |  * js对象的 reactive 响应式代理
26 |  */
27 | export const objectReactive = reactive({
28 |   name: 'jykReactive',
29 |   age: 18,
30 |   contacts: {
31 |     QQ: 11111,
32 |     phone: 123456789
33 |   }
34 | })
35 | 
36 | /**
37 |  * js对象的 shallowReactive 响应式代理
38 |  */
39 | export const objectShallowReactive = shallowReactive({
40 |   name: 'jykShallowReactive',
41 |   age: 18,
42 |   contacts: {
43 |     QQ: 11111,
44 |     phone: 123456789
45 |   }
46 | })
47 | 
48 | /**
49 |  * reactive 的 shallowReactive 响应式代理
50 |  */
51 | export const retShallowReactive = shallowReactive(objectReactive)
52 | 
53 | // ================================================
54 | 
55 | /**
56 |  * person 的 readonly 代理
57 |  */
58 | export const objectReadonly = readonly(person)
59 | 
60 | /**
61 |  * reactive 的 readonly 代理
62 |  */
63 | export const reactiveReadonly = readonly(objectReactive)
64 | 
65 | /**
66 |  * person 的 shallowReadonly 响应式代理
67 |  */
68 | export const objectShallowReadonly = shallowReadonly(person)
69 | 
70 | /**
71 |  * reactive 的 shallowReadonly 响应式代理
72 |  */
73 | export const reactiveShallowReadonly = shallowReadonly(objectReactive)
74 | 
75 | // ================================================
76 | 


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/proxy-reactive.js:
--------------------------------------------------------------------------------
  1 | const reactive = Vue.reactive
  2 | const watch = Vue.watch
  3 | 
  4 | const test = () => {
  5 |   // js对象
  6 |   const object = {
  7 |     name: 'jyk',
  8 |     age: 18,
  9 |     contacts: {
 10 |       QQ: 11111,
 11 |       phone: 123456789
 12 |     }
 13 |   }
 14 | 
 15 |   // reactive的对象
 16 |   const retObject = reactive({
 17 |     name: 'jyk',
 18 |     age: 18,
 19 |     contacts: {
 20 |       QQ: 11111,
 21 |       phone: 123456789
 22 |     }
 23 |   })
 24 | 
 25 |   /**
 26 |    * 用Proxy定义一个 reactive 的套娃，实现可以监听任意属性变化的目的
 27 |    * @param {*} _target  要拦截的目标
 28 |    * @param {*} callback 属性变化后的回调函数
 29 |    */
 30 |   const myReactive = (_target, callback) => {
 31 |     let _change = (key, value) => {console.log('内部函数')}
 32 |     const proxy = new Proxy(_target, {
 33 |       get: function (target, key, receiver) {
 34 |         if (typeof key !== 'symbol') {
 35 |           console.log(`getting ${key}!`, target[key])
 36 |         } else {
 37 |           console.log('getting symbol:', key, target[key])
 38 |         }
 39 |         // 调用原型方法
 40 |         return Reflect.get(target, key, receiver)
 41 |       },
 42 |       set: function (target, key, value, receiver) {
 43 |         console.log(`setting ${key}：${value}!`)
 44 |         // 源头监听
 45 |         if (typeof callback === 'function') {
 46 |           callback(key, value)
 47 |         }
 48 |         // 任意位置监听
 49 |         if (typeof _target.__watch === 'function') {
 50 |           _change(key, value)
 51 |         }
 52 |         // 调用原型方法
 53 |         return Reflect.set(target, key, value, target)
 54 |       }
 55 |     })
 56 |     // 实现任意位置的监听，
 57 |     proxy.__watch = (callback) => {
 58 |       if (typeof callback === 'function') {
 59 |         _change = callback
 60 |       }
 61 |     }
 62 |     // 返回实例
 63 |     return proxy
 64 |   }
 65 | 
 66 |   const myProxy = (_target) => {
 67 |     const proxy = new Proxy(_target, {
 68 |       get: function (target, key, receiver) {
 69 |         console.log(`getting ${key}：`, target[key])
 70 |         // 调用原型方法
 71 |         return Reflect.get(target, key, receiver)
 72 |       },
 73 |       set: function (target, key, value, receiver) {
 74 |         console.log(`setting ${key}：${value}!`)
 75 |         // 调用原型方法
 76 |         return Reflect.set(target, key, value, receiver)
 77 |       }
 78 |     })
 79 |     // 返回实例
 80 |     return proxy
 81 |   }
 82 | 
 83 |   return {
 84 |     object,
 85 |     retObject,
 86 |     myReactive,
 87 |     myProxy
 88 |   }
 89 | }
 90 | 
 91 | /**
 92 |  * ES6的Proxy
 93 |  * 自己定义一个Proxy，看看效果
 94 | */
 95 | export default {
 96 |   name: 'reactive-Proxy',
 97 |   template: `
 98 |     <div>
 99 |       用 Proxy 给reactive 套个娃看看效果 <br>
100 |       拦截reactive的myProxy：{{myProxyReactive}} <br><br>
101 |       <el-button @click="update" type="primary">修改状态</el-button>
102 |     </div>
103 |   `,
104 |   setup () {
105 |     const {
106 |       object,
107 |       retObject,
108 |       myReactive,
109 |       myProxy
110 |     } = test()
111 | 
112 |     console.log('object', object)
113 |     console.log('retObject', retObject)
114 |     
115 |     // 定义一个拦截普通对象的Proxy
116 |     const myProxyObject = myReactive(object, ((key, value) =>{
117 |       console.log(`obj外部获得通知：${key}:${value}`)
118 |     }))
119 |     console.log('myProxyObject', myProxyObject)
120 | 
121 |     // 定义一个拦截reactive的Proxy
122 |     // 并且实现源头的监听
123 |     const myProxyReactive = myReactive(retObject,
124 |       ((key, value) =>{
125 |         console.log(`ret外部获得通知：${key}:${value}`)
126 |       })
127 |     )
128 |     console.log('myProxyReactive', myProxyReactive)
129 | 
130 |     // 任意位置的监听
131 |     myProxyReactive.__watch((key, value) => {
132 |       console.log(`任意位置的监听：${key}:${value}`)
133 |     })
134 | 
135 |     // 定义自己写的Proxy
136 |     const testProxy = myProxy({
137 |       name: 'jyk',
138 |       age: 18
139 |     })
140 |     console.log('自己定义的Proxy实例：')
141 |     console.log(testProxy)
142 | 
143 |     // 测试拦截情况
144 |     testProxy.name = '新的名字'
145 |     console.log(testProxy.name)
146 | 
147 |     // 深度监听
148 |     watch(() => retObject, (v1, v2) => {
149 |       console.log('监听属性', v1, v2)
150 |     },{
151 |       deep: true // 深度监听
152 |     })
153 | 
154 |     // 修改数据
155 |     const update = () => {
156 |       // retObject.name = 'reactive修改name'
157 |       retObject['newprops'] = '新增一个属性：' + Math.random()
158 |       myProxyReactive.name = '自定义的拦截修改name' + Math.random()
159 |       myProxyReactive.contacts.QQ = 123456
160 |       // 新增属性
161 |       // myProxyReactive['new'] = '这是一个新属性' + Math.random()
162 |     }
163 |     
164 |     return {
165 |       object,
166 |       retObject,
167 |       myProxyObject,
168 |       myProxyReactive,
169 |       update
170 |     }
171 |   }
172 | }
173 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/proxy.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const test = () => {
 3 |   // js对象
 4 |   const object = {
 5 |     name: 'jyk',
 6 |     age: 18,
 7 |     contacts: {
 8 |       QQ: 11111,
 9 |       phone: 123456789
10 |     }
11 |   }
12 | 
13 |   /**
14 |    * 模仿reactive，定义一个Proxy实例，观察拦截情况
15 |    * @param {*} _target 原型对象
16 |    */
17 |   const myProxy = (_target) => {
18 |     const proxy = new Proxy(_target, {
19 |       get: function (target, key, receiver) {
20 |         console.log('getting',key, '：', target[key])
21 |         // 调用原型方法
22 |         return Reflect.get(target, key, receiver)
23 |       },
24 |       set: function (target, key, value, receiver) {
25 |         console.log(`setting ${key} ： ${value}`)
26 |         // 调用原型方法
27 |         return Reflect.set(target, key, value, receiver)
28 |       }
29 |     })
30 |     // 返回实例
31 |     return proxy
32 |   }
33 | 
34 |   return {
35 |     object,
36 |     myProxy
37 |   }
38 | }
39 | 
40 | /**
41 |  * ES6的Proxy
42 |  * 自己定义一个Proxy，看看效果
43 | */
44 | export default {
45 |   name: 'es6-Proxy',
46 |   template: `
47 |     <div>
48 |       ES6的proxy<br>
49 |       自己定义的myProxy：{{testProxy}} <br><br>
50 |       <el-button @click="update" type="primary">修改状态</el-button>
51 |     </div>
52 |   `,
53 |   setup () {
54 |     const {
55 |       object,
56 |       myProxy
57 |     } = test()
58 | 
59 |     console.log('object', object)
60 | 
61 |     // 定义自己写的Proxy
62 |     const testProxy = myProxy({
63 |       name: 'jyk',
64 |       age: 18,
65 |       contacts: {
66 |         QQ: 11111,
67 |         phone: 123456789
68 |       }
69 |     })
70 |     console.log('自己定义的Proxy实例：')
71 |     console.log(testProxy)
72 | 
73 |     // 测试拦截情况
74 |     testProxy.name = '新的名字'
75 |     console.log(testProxy.name)
76 | 
77 |     // 伪造一个reactive，看看toRaw好用不。
78 |     const raw = Vue.toRaw(Vue.toRaw(myProxy({name: 'jyk',__v_isReactive: true})))
79 |     console.log('伪装成reactive 的raw11', raw)
80 | 
81 |     // 修改数据
82 |     const update = () => {
83 |       // retObject.name = 'reactive修改name'
84 |       testProxy['newprops'] = '新增一个属性：' + Math.random()
85 |       testProxy.name = '自定义的拦截修改name' + Math.random()
86 |       testProxy.contacts.QQ = 123456
87 |       // 新增属性
88 |       // myProxyReactive['new'] = '这是一个新属性' + Math.random()
89 |     }
90 |     
91 |     return {
92 |       object,
93 |       testProxy,
94 |       update
95 |     }
96 |   }
97 | }
98 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/reactive-shallow.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { person, objectShallowReactive } from './person.js'
 3 | 
 4 | /**
 5 |  * 定义 shallowReactive  
 6 | */
 7 | export default {
 8 |   name: 'reactive-shallowReactive',
 9 |   template: `
10 |     <div>
11 |       展示 shallowReactive <br>
12 |       shallowReactive 对象：{{objectShallowReactive}} <br><br>
13 |       shallowReactive 的name属性：{{objectShallowReactive.name}} （有响应） <br><br>
14 |       shallowReactive 的contacts属性 的 QQ属性：{{objectShallowReactive.contacts.QQ}} （没有相应） <br><br>
15 |    
16 |       单独的 name：{{name}} （没有相应）<br><br>
17 |       单独的 contacts：{{contacts}} （没有响应） <br><br>
18 |    
19 |       <el-button @click="update" type="primary">修改属性</el-button>
20 |     </div>
21 |   `,
22 |   setup () {
23 |     // 查看 shallowReactive 实例结构
24 |     console.log('shallowReactive', objectShallowReactive)
25 |     // 获取嵌套对象属性
26 |     const contacts = objectShallowReactive.contacts
27 |     // 因为浅层，所以没有响应性
28 |     console.log('contacts属性：', contacts)
29 |     // 获取简单类型的属性
30 |     let name = objectShallowReactive.name 
31 |     // 属性是简单类型的，所以失去响应性
32 |     console.log('name属性：', name) 
33 | 
34 |     const update = () => {
35 |       // 修改原型
36 |       person.name = '修改原型的name' +  Math.random()
37 |       
38 |       // 修改属性
39 |       objectShallowReactive.name = '设置代理的name属性' // +  Math.random()
40 |       objectShallowReactive.contacts.QQ = 123 +  Math.random()
41 |       
42 |       // 修改结构的属性
43 |       name = '设置解构的name属性' +  Math.random()
44 |       contacts.QQ = 123 +  Math.random()
45 |     }
46 | 
47 |     return {
48 |       person, // js对象
49 |       objectShallowReactive, // perosn 套上 reactive
50 |       name, // 结构的name属性
51 |       contacts, // 结构的对象属性
52 |       update // 修改属性
53 |     }
54 |   }
55 | }
56 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/reactive.js:
--------------------------------------------------------------------------------
  1 | const reactive = Vue.reactive
  2 | 
  3 | import { person, personReactive, objectReactive } from './person.js'
  4 | 
  5 | /**
  6 |  * reactive 的结构
  7 |  * 属性的深层响应性
  8 |  * 
  9 | */
 10 | export default {
 11 |   name: 'reactive-reactive',
 12 |   template: `
 13 |     <div>
 14 |       展示 reactive <br>
 15 |       js 对象：{{person}} <br><br>
 16 |       reactive 对象：{{objectReactive}} <br><br>
 17 |       reactive 的name属性：{{objectReactive.name}} <br><br>
 18 |       reactive 的contacts属性 的 QQ属性：{{objectReactive.contacts.QQ}} <br><br>
 19 |    
 20 |       单独的 name：{{name}} （没有相应）<br><br>
 21 |       单独的 contacts：{{contacts}} （有响应） <br><br>
 22 |    
 23 |       reactive 数组：{{reactiveArray}} <br><br>
 24 | 
 25 |       <el-button @click="update" type="primary">修改属性</el-button><br><br>
 26 |       <el-button @click="setReactive" type="primary">整体赋值</el-button><br><br>
 27 |     </div>
 28 |   `,
 29 |   setup () {
 30 |     // 查看 reactive 实例结构
 31 |     console.log('reactive', personReactive)
 32 |     // 获取嵌套对象属性
 33 |     const contacts = personReactive.contacts
 34 |     console.log('contacts属性：', contacts) // 因为深层响应，所以依然有响应性
 35 |     // 获取简单类型的属性
 36 |     let name = personReactive.name 
 37 |     console.log('name属性：', name) // 属性是简单类型的，所以失去响应性
 38 | 
 39 |     // js对象
 40 |     console.log('person', person)
 41 | 
 42 |     // reactive 的数组
 43 |     const reactiveArray = reactive([
 44 |       {
 45 |         name: 'jyk',
 46 |         age: 18
 47 |       },
 48 |       {
 49 |         name: 'jyk111',
 50 |         age: 19
 51 |       }
 52 |     ])
 53 | 
 54 |     const update = () => {
 55 |       // 修改原型
 56 |       person.name = '修改原型的name' +  Math.random()
 57 |       
 58 |       // 修改 person 的代理 属性
 59 |       personReactive.name = '修改person代理的name属性' +  Math.random()
 60 |       
 61 |       // 修改属性
 62 |       objectReactive.name = '设置代理的name属性' +  Math.random()
 63 |       objectReactive.contacts.QQ = 123 +  Math.random()
 64 |       
 65 |       // 修改结构的属性
 66 |       name = '设置解构的name属性' +  Math.random()
 67 |       contacts.QQ = 123 +  Math.random()
 68 |       // retArray
 69 |       // console.log('现在的person', person)
 70 |     }
 71 | 
 72 |     const setReactive = () => {
 73 |       // 直接赋值
 74 |       Object.assign(objectReactive, {name: '合并', age: 111, newp: '新属性'})
 75 |       // reactiveArray.length = 0 // 容易照成闪烁
 76 |       setTimeout(() => {
 77 |         const newArray = [
 78 |           { name: '11', age: 18 },
 79 |           { name: '22', age: 18 },
 80 |           { name: '33', age: 18 }
 81 |         ]
 82 |         // 可以防止闪烁
 83 |         reactiveArray.length = 0
 84 |         reactiveArray.push(...newArray)
 85 |       }, 1000);
 86 |     }
 87 | 
 88 |     return {
 89 |       person, // js对象
 90 |       personReactive, // perosn 套上 reactive
 91 |       objectReactive, // {} 套上 reactive
 92 |       name, // 结构的name属性
 93 |       contacts, // 结构的对象属性
 94 |       reactiveArray, // 数组的响应性
 95 |       update, // 修改属性
 96 |       setReactive // 直接设置
 97 |     }
 98 |   }
 99 | }
100 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/readonly-shallow.js:
--------------------------------------------------------------------------------
 1 | import { 
 2 |   person, // object 对象
 3 |   objectReactive, // 普通的 object  的 reactive 代理
 4 |   objectShallowReadonly, // reactive 的 readonly 代理
 5 |   reactiveShallowReadonly // 普通的 object 的 readonly 代理
 6 | } from './person.js'
 7 | 
 8 | /**
 9 |  * 定义 shallowReadonly
10 |  * 
11 | */
12 | export default {
13 |   name: 'reactive-shallowReadonly',
14 |   template: `
15 |     <div>
16 |       展示 shallowReadonly <br>
17 |       object 的只读代理：{{objectShallowReadonly}} <br><br>
18 |       reactive 的 只读代理：{{reactiveShallowReadonly}}  <br><br>
19 |       reactive 对象：{{objectReactive}} <br><br>
20 | 
21 |       <el-button @click="update" type="primary">修改属性</el-button>
22 |     </div>
23 |   `,
24 |   setup () {
25 |     // 查看 readonly 实例结构
26 |     console.log('object 的 objectShallowReadonly')
27 |     console.log(objectShallowReadonly)
28 |     console.log('reactive 的 reactiveShallowReadonly')
29 |     console.log(reactiveShallowReadonly)
30 |    
31 |     // 修改数据
32 |     const update = () => {
33 | 
34 |     }
35 | 
36 |     return {
37 |       objectShallowReadonly,
38 |       reactiveShallowReadonly,
39 |       objectReactive,
40 |       update
41 |     }
42 |   }
43 | }
44 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/readonly.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { 
 3 |   person, // object 对象
 4 |   objectReactive, // object  的 reactive 代理
 5 |   reactiveReadonly, // reactive 的 readonly 代理
 6 |   objectReadonly // object 的 readonly 代理
 7 | } from './person.js'
 8 | 
 9 | /**
10 |  * 展示 readonly
11 |  * 
12 | */
13 | export default {
14 |   name: 'reactive-readonly',
15 |   template: `
16 |     <div>
17 |       展示 readonly <br>
18 |       js 对象的只读代理：{{objectReadonly}} <br><br>
19 |       reactive 的 只读代理：{{reactiveReadonly}}  <br><br>
20 |       reactive 对象：{{objectReactive}} <br><br>
21 | 
22 |       <el-button @click="update" type="primary">修改属性</el-button>
23 |     </div>
24 |   `,
25 |   setup () {
26 |     // 查看 readonly 实例结构
27 |     console.log('object 的readonly')
28 |     console.log(objectReadonly)
29 |     console.log('reactive 的readonly')
30 |     console.log(reactiveReadonly)
31 | 
32 |     // 获取嵌套对象属性
33 |     const contacts = reactiveReadonly.contacts
34 |     console.log('contacts属性：', contacts) // 因为深层响应，所以依然有响应性
35 |     // 获取简单类型的属性
36 |     let name = reactiveReadonly.name 
37 |     console.log('name属性：', name) // 属性是简单类型的，所以失去响应性
38 | 
39 |     // 修改数据
40 |     const update = () => {
41 |       // 可以影响readonlyObject.name的值，但是模板不会刷新
42 |       person.name = '修改对象原型的name'
43 |       // 不会修改，有警告
44 |       objectReadonly.name = '改只读纯对象的name'
45 |       // 不会修改，有警告
46 |       objectReadonly.contacts.QQ = 1232222
47 |       // 不会修改，有警告
48 |       reactiveReadonly.name = '改只读reactive的name'
49 |       // 不会修改，有警告
50 |       reactiveReadonly.contacts.QQ = 345
51 |       // 可以修改 readonly代理的值，并且可以更新模板
52 |       person.name = '改原型reactive的name'
53 |       // 可以修改 readonly代理的值，并且可以更新模板
54 |       person.contacts.QQ = 789
55 | 
56 |     }
57 | 
58 |     return {
59 |       person,
60 |       objectReactive,
61 |       reactiveReadonly,
62 |       objectReadonly,
63 |       update
64 |     }
65 |   }
66 | }
67 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/reactive/toraw.js:
--------------------------------------------------------------------------------
 1 | const toRaw = Vue.toRaw
 2 | 
 3 | import { 
 4 |   person, // object 对象
 5 |   objectReactive, // 普通的 object  的 reactive 代理
 6 |   objectShallowReactive, // reactive 的 shallowReactive 代理
 7 |   objectReadonly, // 普通的 object 的 readonly 代理
 8 |   objectShallowReadonly
 9 | } from './person.js'
10 | 
11 | import indexedDB from '../../script/nf-indexedDB.js'
12 | 
13 | /**
14 |  * toRaw 取原型
15 |  * 序列化
16 |  * 存储
17 | */
18 | export default {
19 |   name: 'reactive-toRaw',
20 |   template: `
21 |     <div>
22 |       展示 toRaw <br>
23 | 
24 |       <el-button @click="update" type="primary">修改属性</el-button>
25 | 
26 |     </div>
27 |   `,
28 |   setup () {
29 | 
30 |     const { setup, addObject} = indexedDB()
31 | 
32 |     console.log('reacive 的原型', toRaw(objectReactive))
33 |     console.log('shallowReactive 的原型', toRaw(objectShallowReactive))
34 |     console.log('readonly 的原型', toRaw(objectReadonly))
35 |     console.log('shallowReadonly 的原型', toRaw(objectShallowReadonly))
36 |     
37 |     // 转为json
38 |     const json1 = JSON.stringify(person)
39 |     console.log('json1', json1)
40 |     const json2 = JSON.stringify(toRaw(objectReactive))
41 |     console.log('json2', json2)
42 |     const json3 = JSON.stringify(objectReactive)
43 |     console.log('json3', json3)
44 |     
45 |     // 保存到 
46 |     const update = () => {
47 |       const storage = window.sessionStorage
48 |       //写入 reactive
49 |       storage['test-reactive'] = objectReactive
50 |       storage['test-json'] = json3
51 |       // 直接存入 indexedDB会报错
52 |       // addObject('reactive', objectReactive)
53 |       // 存入原型
54 |       addObject('reactive', toRaw(objectReactive))
55 |       
56 |     }
57 | 
58 |     return {
59 |       objectReactive,
60 |       objectReadonly,
61 |       update
62 |     }
63 |   }
64 | }
65 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/store.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   这里演示一下 vuex 的一些操作：<br>
3 |   
4 |   ref的count ：{{refCount}} <br>
5 |   计算属性的Count ：{{comCount}} <br>
6 |   只读对象 ：{{readonlyObject}} <br>
7 |   
8 | </div>


--------------------------------------------------------------------------------
/cnd/project-compositionapi/src/views/store.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   // 获取状态
 4 |   const indirectManage = () => {
 5 |     const store = Vuex.useStore()
 6 | 
 7 |     // 用toRef获取 count，有相应性，可以直接修改state
 8 |     const refCount = Vue.toRef(store.state, 'count')
 9 |     // 计算属性获取count，有相应性，不可以直接修改state
10 |     const comCount = Vue.computed(() => store.state.count + 10)
11 |     // 只读的对象，有响应性，浅层不可以修改，但是深层还是可以修改。
12 |     const readonlyObject = Vue.readonly(store.state.myObject)
13 | 
14 |     console.log('refCount：', refCount)
15 |     console.log('comCount：', comCount)
16 |     console.log('readonlyObject：', readonlyObject)
17 |     console.log('================')
18 | 
19 |     // 定时修改 count 看响应性
20 |     setTimeout(() => {
21 |       // store.commit('setCount')
22 |       // refCount.value += 200 // 会直接改vuex的state
23 |     }, 2000)
24 |    
25 |     return {
26 |       refCount,
27 |       comCount,
28 |       readonlyObject
29 |     }
30 |   }
31 | 
32 | 
33 | export default {
34 |     name: 'vuex_store',
35 |     template: '',
36 |     components: {
37 |     },
38 |     setup () {
39 |       const value = Vue.ref('状态管理的演示')
40 |       
41 |       // 获取状态
42 |       const { refCount, comCount, readonlyObject } = indirectManage()
43 |      
44 |       return {
45 |         value,
46 |         refCount, comCount, readonlyObject
47 |       }
48 |     }
49 |   }
50 |   


--------------------------------------------------------------------------------
/cnd/project-compositionapi/web.config:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <configuration>
 3 |     <system.webServer>
 4 |         <httpErrors errorMode="Custom">
 5 |             <remove statusCode="404" subStatusCode="-1" />
 6 |             <error statusCode="404" prefixLanguageFilePath="" path="/index.html" responseMode="ExecuteURL" />
 7 |         </httpErrors>
 8 |         <security>
 9 |             <requestFiltering>
10 |                 <fileExtensions>
11 |                     <add fileExtension=".vue" allowed="true" />
12 |                 </fileExtensions>
13 |             </requestFiltering>
14 |         </security>
15 |         <staticContent>
16 |             <mimeMap fileExtension=".vue" mimeType="text/html" />
17 |         </staticContent>
18 |         <httpRedirect enabled="false" destination="http://localhost:8020/" />
19 |     </system.webServer>
20 | </configuration>
21 | 


--------------------------------------------------------------------------------
/cnd/project-template/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # CND 的工程化开发的模板
 3 | 
 4 | * vue的全家桶和UI库采用CDN方式加载。
 5 | * 支持路由，Router。
 6 | * 支持状态管理，Vuex。
 7 | * 支持UI库： element-plus、ant Design Vue，其他的没测试。
 8 | * 支持axios。
 9 | * 采用工程化的目录结构和代码编写方式。
10 | * vue文件需要拆分成 html 文件 + js 文件的方式。
11 | * 用版本号更新浏览器的js文件的缓存。
12 | 
13 | # 特点
14 | 
15 | * 建立网站即可运行，不需要安装、打包。
16 | * 不需要webpack
17 | * 不需要node_modules 文件夹
18 | * jQuery的风格，可以断点跟踪调试
19 | 
20 | 在线演示：  
21 | https://naturefwvue.github.io/nf-vue-cnd/cnd/project-template
22 | 


--------------------------------------------------------------------------------
/cnd/project-template/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <link rel="icon" href="public/favicon.ico" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title> CDN模式下的工程化开发的模板 </title>
 8 |   <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
 9 |   <script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
10 |   <script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js"></script>
11 |   <link href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css" rel="stylesheet">
12 |   <script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></script>
13 |   <!--axios-->
14 |   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
15 |   <script type="text/javascript">
16 |     // 假定 src在网站根目录
17 |     let basrUrl = '/src/' 
18 |     // 判断所处网站，确定基础url
19 |     switch (window.location.origin) {
20 |       case 'https://naturefwvue.github.io': //github
21 |         basrUrl = '/nf-vue-cnd/cnd/project-template/src/'
22 |         break
23 |     }
24 |     window.__ver = '?v=7'
25 |     window.__basrUrl = basrUrl
26 | 
27 |   </script>
28 |   <script type="module" src="src/script/appImport.js"></script>
29 |   <style>
30 |     #app {
31 |       font-family: Avenir, Helvetica, Arial, sans-serif;
32 |       -webkit-font-smoothing: antialiased;
33 |       -moz-osx-font-smoothing: grayscale;
34 |       text-align: center;
35 |       color: #2c3e50;
36 |     }
37 |     #nav {
38 |       padding: 30px;
39 |     }
40 |     #nav a {
41 |       font-weight: bold;
42 |       color: #2c3e50;
43 |     }
44 |     #nav a.router-link-exact-active {
45 |       color: #42b983;
46 |     }
47 |     </style>
48 | </head>
49 | <body>
50 |   <div>
51 |     这里是CDN仿工程化开发的模板... 如果你没看到“首页”的内容，说明网页没有在网站的更目录。
52 |   </div>
53 |   <div id="app">
54 |     <div id="nav">
55 |       <p>
56 |         <router-link :to="{name:'Home'}">首页</router-link>&nbsp;&nbsp;&nbsp;
57 |         <router-link :to="{name:'About'}">关于</router-link>&nbsp;&nbsp;&nbsp;
58 |         <router-link :to="{name:'component'}">异步组件</router-link>&nbsp;&nbsp;&nbsp;
59 |         <router-link :to="{name:'store'}">状态管理</router-link>&nbsp;&nbsp;&nbsp;
60 |       </p>
61 |       <hr>
62 |       <div style="text-align: left;margin-left: 100px;height: 450px;">
63 |         <router-view></router-view>
64 |       </div>
65 |     </div>
66 |     <hr>
67 |     <div style="text-align: left;">
68 |       vuex状态演示<br>
69 |       $store.state ：{{$store.state}} <br>
70 |      
71 |       <el-button type="primary" @click="setCount">更改状态</el-button><br>
72 |     </div>
73 |     
74 |   
75 |   <script type="module" src="src/main.js?v=4"></script>
76 | </body>
77 | </html>
78 | 
79 | 


--------------------------------------------------------------------------------
/cnd/project-template/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/project-template/public/favicon.ico


--------------------------------------------------------------------------------
/cnd/project-template/src/app.js:
--------------------------------------------------------------------------------
 1 |   
 2 |   // import { Set_Count, Set_Count_sy } from './store/mutation-types.js'
 3 | 
 4 | export default {
 5 |   name: 'app',
 6 |   setup() {
 7 |     const store = Vuex.useStore()
 8 | 
 9 |     // 状态的控制事件
10 |     const setCount = () =>{
11 |       store.commit('setCount')
12 |       store.commit('setTime')
13 |       store.commit('setArray')
14 |       // store._mutations.setCount[0] // 这是什么？
15 |     }
16 |   
17 |     return {
18 |       // 设置state
19 |       setCount
20 |     }
21 |   }
22 | }


--------------------------------------------------------------------------------
/cnd/project-template/src/components/test.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   <br>
3 |   这是 组件测试<br>
4 |   父组件传递参数：{{str}}<br>
5 |   setup 获取参数：{{str1}}<br>
6 | </div>


--------------------------------------------------------------------------------
/cnd/project-template/src/components/test.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'component-test',
 3 |   template: '',
 4 |   props: {
 5 |     str: String
 6 |   },
 7 |   setup(props) {
 8 |     // 在setup里面获取参数值
 9 |     let str1 = Vue.ref(props.str)
10 |     str1.value += '--内部改一下。'
11 | 
12 |     return {
13 |       str1
14 |     }
15 |   }
16 | }


--------------------------------------------------------------------------------
/cnd/project-template/src/main.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | import store from './store/index.js?v=28'
 3 | import router from './router/index.js?v=28'
 4 | import App from './app.js?v=28'
 5 | 
 6 | 
 7 | // 创建vue3的实例
 8 | const app = Vue.createApp(App)
 9 |   .use(store) // 挂载vuex
10 |   .use(router) // 挂载路由
11 |   .use(ElementPlus) // 加载ElementPlus
12 |   .mount('#app') // 挂载Vue的app实例
13 | 
14 | */
15 | 
16 | const ver = window.__ver || ''
17 | 
18 | Promise.all([
19 |   import('./store/index.js' + ver),
20 |   import('./router/index.js' + ver),
21 |   import('./app.js' + ver),
22 | ]).then((res) => {
23 |   // 创建vue3的实例
24 |   const app = Vue.createApp(res[2].default)
25 |     .use(res[0].default) // 挂载vuex
26 |     .use(res[1].default) // 挂载路由
27 |     .use(ElementPlus) // 加载ElementPlus
28 |     .mount('#app') // 挂载Vue的app实例
29 | })
30 | 


--------------------------------------------------------------------------------
/cnd/project-template/src/router/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const routes = [
 3 |   {
 4 |     path: '/',
 5 |     name: 'Home',
 6 |     component: () => myImport('views/home')
 7 |   },
 8 |   {
 9 |     path: '/About',
10 |     name: 'About',
11 |     component: () => myImport('views/About')
12 |   },
13 |   {
14 |     path: '/component',
15 |     name: 'component',
16 |     component: () => myImport('views/component')
17 |   },
18 |   {
19 |     path: '/store',
20 |     name: 'store',
21 |     component: () => myImport('views/store')
22 |   }
23 | ]
24 | 
25 | const router = VueRouter.createRouter({
26 |   history: VueRouter.createWebHistory(),
27 |   routes
28 | })
29 | 
30 | export default router
31 | 


--------------------------------------------------------------------------------
/cnd/project-template/src/script/appImport.js:
--------------------------------------------------------------------------------
 1 | // 直接放在Window里面好了。。。
 2 | window.myImport = (url) => {
 3 |   return new Promise((resolve, reject) => {
 4 |     const ver = window.__ver || ''
 5 |     const baseUrl = window.__basrUrl || '/src/'
 6 |     // 先加载js
 7 |     import(baseUrl + url + '.js' + ver).then((resjs) => {
 8 |       const js = resjs.default
 9 |       if (js.template === '') {
10 |         // 如果模板是空的，表示需要加载html作为模板
11 |         axios.get(baseUrl + url + '.html' + ver).then((resHTML) => {
12 |           js.template = resHTML.data
13 |           resolve(js)
14 |         })
15 |       } else {
16 |         // 否则直接使用js注册组件
17 |         resolve(js)
18 |       }
19 |     })
20 |   })
21 | }
22 | 


--------------------------------------------------------------------------------
/cnd/project-template/src/store/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { Set_Count } from './mutation-types.js'
 3 | 
 4 | export default Vuex.createStore({
 5 |   state: {
 6 |     count: 0,
 7 |     myObject: {
 8 |       time: '现在的时间：'
 9 |     },
10 |     myArray: [1,2,2,3,4]
11 |   },
12 |   getters: {
13 |     getAddCount: (state) => {
14 |       return state.count + 1
15 |     },
16 |     getTime: (state) => {
17 |       return state.myObject.time + new Date()
18 |     },
19 |     filterArray: (state) => (id) => {
20 |       return state.myArray.filter((item) => item === id)
21 |     }
22 |   },
23 |   mutations: {
24 |     // 计数器
25 |     setCount(state, num = 1) {
26 |       state.count += num
27 |     },
28 |     [Set_Count](state, num = 1) {
29 |       state.count += num
30 |     },
31 |     // 设置当前时间
32 |     setTime(state) {
33 |       state.myObject.time = '现在时间：' + new Date()
34 | 
35 |     },
36 |     // 设置数组的值
37 |     setArray(state, val = 4) {
38 |       state.myArray[1] = val
39 |     },
40 |     reloadArray(state, arr) {
41 |       state.myArray.lenth = 0
42 |       state.myArray = [...arr]
43 |     }
44 |   },
45 |   actions: {
46 |     // 异步获取数组
47 |     getArray(context) {
48 |       setTimeout(() => {
49 |         context.commit('setArray', new Date().valueOf())
50 |       }, 10000)
51 |     },
52 |     // 异步获取数组
53 |     getArrayPromise(context) {
54 |       return new Promise((resolve, reject) => {
55 |         setTimeout(() => {
56 |           const time = new Date().valueOf()
57 |           resolve(time)
58 |         }, 2000)
59 |       })
60 |     },
61 |     // axios
62 |     getDat2(context) {
63 |       const ajax = axios.get('demo.json')
64 |       ajax.then((response) => {
65 |           const arr = response.data.company.formItem
66 |           console.log('getData - axios - response', arr)
67 |           // context.commit('reloadArray', arr)
68 |         })
69 |         .catch((error) => {
70 |           console.log('getData - axios - error', error)
71 |         })
72 |       return ajax // 直接返回 axios 的promise的实例
73 |     }
74 |   },
75 |   modules: {
76 |   }
77 | })
78 | 


--------------------------------------------------------------------------------
/cnd/project-template/src/store/map.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const map = () => {
 3 |   const store = Vuex.useStore()
 4 |     
 5 |   /**
 6 |   * 获取count，
 7 |   * 用computed实现相应
 8 |   */
 9 |   const getCount = () => {
10 |     return Vue.computed(() => store.state.count)
11 |   }
12 | 
13 |   /**
14 |   * 获取count，
15 |   ** 用 ref 实现相应
16 |   */
17 |   const getRefCount = () => {
18 |     return Vue.ref(store.state.count)
19 |   }
20 | 
21 |   /**
22 |   * 获取对象
23 |   */
24 |   const getObject = () => {
25 |     return store.state.myObject
26 |   }
27 | 
28 |   /**
29 |   * 获取只读对象
30 |   */
31 |   const getReadonlyObject = () => {
32 |     return Vue.readonly(store.state.myObject)
33 |   }
34 | 
35 |   /**
36 |   * 获取数组
37 |   */
38 |   const getArray = () => {
39 |     return store.state.myArray
40 |   }
41 |   /**
42 |   * 获取只读数组
43 |   */
44 |   const getReadonlyArray = () => {
45 |     return Vue.readonly(store.state.myArray)
46 |   }
47 | 
48 |   /**
49 |   * 查询数组
50 |   ** id：要查询的数据
51 |   */
52 |   const filterArray = (id) => {
53 |     return  Vue.computed(() => store.getters.filterArray(id))
54 |   }
55 | 
56 |   return {
57 |     getCount,
58 |     getRefCount,
59 |     getObject,
60 |     getReadonlyObject,
61 |     getArray,
62 |     getReadonlyArray,
63 |     filterArray
64 |   }
65 | 
66 | }
67 | 
68 | export default map


--------------------------------------------------------------------------------
/cnd/project-template/src/store/mutation-types.js:
--------------------------------------------------------------------------------
1 | export const Set_Count = 'set_count'
2 | export const Set_Count_sy = Symbol('set_count')
3 | 


--------------------------------------------------------------------------------
/cnd/project-template/src/views/About.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   演示一下由路由加载的组件。<br>
3 |   html 和 js分开写的方式。<br>
4 |   插值演示：{{value}}<br>
5 | </div>
6 |   


--------------------------------------------------------------------------------
/cnd/project-template/src/views/About.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     name: 'About',
 3 |     template: '',
 4 |     setup () {
 5 |       const value = Vue.ref('数据绑定的演示')
 6 |    
 7 |       return {
 8 |         value
 9 |       }
10 |     }
11 |   }
12 |   


--------------------------------------------------------------------------------
/cnd/project-template/src/views/component.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   演示一下组件里面使用组件的方式<br>
3 |   <test :str="value"></test>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/cnd/project-template/src/views/component.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     name: 'template',
 3 |     template: ``,
 4 |     components: {
 5 |       test: Vue.defineAsyncComponent(
 6 |         () => myImport('components/test')
 7 |       )
 8 |     },
 9 |     setup () {
10 |       const value = Vue.ref('传入组件的参数')
11 |       return {
12 |         value
13 |       }
14 |     }
15 |   }
16 |   


--------------------------------------------------------------------------------
/cnd/project-template/src/views/home.js:
--------------------------------------------------------------------------------
 1 | const { ref, reactive } = Vue
 2 | 
 3 | const testManage = () => {
 4 |   const hello = ref('你好，世界')
 5 |   const clickMe = () => {
 6 |     hello.value = '好的，收到，现在时间：' + new Date()
 7 |   }
 8 | 
 9 |   return {
10 |     hello,
11 |     clickMe
12 |   }
13 | }
14 | 
15 | // vue3的对象
16 | export default {
17 |   template: `
18 |       <h2>我是 {{value.name}}</h2>
19 |       <div>
20 |         老规矩：{{hello}}<br>
21 |         <el-button type="primary" @click="clickMe">快点我</el-button><br>
22 |         <br>
23 |         这里是一种CND的开发方式<br>
24 |         vue全家桶和UI库用 CND方式 加载。<br>
25 |         js代码用 import 方式加载。<br>
26 |         目录结构参考了vue-cli建立的项目。<br>
27 |         支持组件、路由、状态管理等功能。<br>
28 |         不用webpack、npm等，建立网站就可以用。<br><br>
29 |         状态计数：{{$store.state.count}}
30 |       </div>
31 |   `,
32 |   setup() {
33 |     // 使用外面的定义，分解setup内部的代码
34 |     const { hello, clickMe } = testManage()
35 | 
36 |     const value = reactive({
37 |       name: 'jyk'
38 |     })
39 | 
40 |   
41 |     return {
42 |       value,
43 |       hello,
44 |       clickMe
45 |     }
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/cnd/project-template/src/views/store.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   这里演示一下 vuex 的一些操作：<br>
3 |   
4 |   ref的count ：{{refCount}} <br>
5 |   计算属性的Count ：{{comCount}} <br>
6 |   只读对象 ：{{readonlyObject}} <br>
7 |   
8 | </div>


--------------------------------------------------------------------------------
/cnd/project-template/src/views/store.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   // 获取状态
 4 |   const indirectManage = () => {
 5 |     const store = Vuex.useStore()
 6 | 
 7 |     // 用toRef获取 count，有相应性，可以直接修改state
 8 |     const refCount = Vue.toRef(store.state, 'count')
 9 |     // 计算属性获取count，有相应性，不可以直接修改state
10 |     const comCount = Vue.computed(() => store.state.count + 10)
11 |     // 只读的对象，有响应性，浅层不可以修改，但是深层还是可以修改。
12 |     const readonlyObject = Vue.readonly(store.state.myObject)
13 | 
14 |     console.log('refCount：', refCount)
15 |     console.log('comCount：', comCount)
16 |     console.log('readonlyObject：', readonlyObject)
17 |     console.log('================')
18 | 
19 |     // 定时修改 count 看响应性
20 |     setTimeout(() => {
21 |       // store.commit('setCount')
22 |       // refCount.value += 200 // 会直接改vuex的state
23 |     }, 2000)
24 |    
25 |     return {
26 |       refCount,
27 |       comCount,
28 |       readonlyObject
29 |     }
30 |   }
31 | 
32 | 
33 | export default {
34 |     name: 'vuex_store',
35 |     template: '',
36 |     components: {
37 |     },
38 |     setup () {
39 |       const value = Vue.ref('状态管理的演示')
40 |       
41 |       // 获取状态
42 |       const { refCount, comCount, readonlyObject } = indirectManage()
43 |      
44 |       return {
45 |         value,
46 |         refCount, comCount, readonlyObject
47 |       }
48 |     }
49 |   }
50 |   


--------------------------------------------------------------------------------
/cnd/project-template/web.config:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <configuration>
 3 |     <system.webServer>
 4 |         <httpErrors errorMode="Custom">
 5 |             <remove statusCode="404" subStatusCode="-1" />
 6 |             <error statusCode="404" prefixLanguageFilePath="" path="/index.html" responseMode="ExecuteURL" />
 7 |         </httpErrors>
 8 |         <security>
 9 |             <requestFiltering>
10 |                 <fileExtensions>
11 |                     <add fileExtension=".vue" allowed="true" />
12 |                 </fileExtensions>
13 |             </requestFiltering>
14 |         </security>
15 |         <staticContent>
16 |             <mimeMap fileExtension=".vue" mimeType="text/html" />
17 |         </staticContent>
18 |         <httpRedirect enabled="false" destination="http://localhost:8020/" />
19 |     </system.webServer>
20 | </configuration>
21 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/README.md:
--------------------------------------------------------------------------------
1 | 
2 | # 介绍vuex的相关内容
3 | 
4 | * state
5 | * getter
6 | 
7 | 在线演示：  
8 | https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex
9 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/a.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/project-vuex/a.html


--------------------------------------------------------------------------------
/cnd/project-vuex/demo.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "company":{
  3 |       "formMeta":{
  4 |         "name":"company",
  5 |         "allColumn":[1000,1001,1002,1003,1004,1005,1006,1007,1008,1009],
  6 |         "state":"add",
  7 |         "colCount":1
  8 |       },
  9 |       "formItem":{
 10 |         "1000":{
 11 |             "controlId": 1000,
 12 |             "colName": "companyName",
 13 |             "controlType": 101,
 14 |             "isClear": true,
 15 |             "disabled": false,
 16 |             "required": true,
 17 |             "readonly": false,
 18 |             "pattern": "",
 19 |             "class": "",
 20 |             "placeholder": "请输入公司名称",
 21 |             "title": "公司名称",
 22 |             "autocomplete": "on",
 23 |             "size": 30,
 24 |             "maxlength": 100,
 25 |             "optionList": [],
 26 |             "tdCount":1
 27 |         },
 28 |         "1001":{
 29 |             "controlId": 1001,
 30 |             "colName": "companyCode",
 31 |             "controlType": 131,
 32 |             "isClear": true,
 33 |             "disabled": false,
 34 |             "required": true,
 35 |             "readonly": false,
 36 |             "pattern": "",
 37 |             "class": "",
 38 |             "placeholder": "公司邮编",
 39 |             "title": "公司邮编",
 40 |             "autocomplete": "on",
 41 |             "min": 100000,
 42 |             "max": 999999,
 43 |             "step": 1,
 44 |             "maxlength": 6,
 45 |             "optionList": [],
 46 |             "tdCount":1
 47 |         },
 48 |         "1002":{
 49 |             "controlId": 1002,
 50 |             "colName": "legalPerson",
 51 |             "controlType": 101,
 52 |             "isClear": true,
 53 |             "disabled": false,
 54 |             "required": true,
 55 |             "readonly": false,
 56 |             "pattern": "",
 57 |             "class": "",
 58 |             "placeholder": "请输入法人姓名",
 59 |             "title": "法人",
 60 |             "autocomplete": "on",
 61 |             "size": 20,
 62 |             "maxlength": 50,
 63 |             "optionList": [],
 64 |             "tdCount":1
 65 |         },
 66 |         "1003":{
 67 |             "controlId": 1003,
 68 |             "colName": "liaisonMan",
 69 |             "controlType": 101,
 70 |             "isClear": true,
 71 |             "disabled": false,
 72 |             "required": true,
 73 |             "readonly": false,
 74 |             "pattern": "",
 75 |             "class": "",
 76 |             "placeholder": "请输入联系人姓名",
 77 |             "title": "联系人",
 78 |             "autocomplete": "on",
 79 |             "size": 20,
 80 |             "maxlength": 50,
 81 |             "optionList": [],
 82 |             "tdCount":1
 83 |         },
 84 |         "1004": {
 85 |           "controlId": "1004",
 86 |           "colName": "address",
 87 |           "controlType": 101,
 88 |           "isClear": true,
 89 |           "defaultValue": "",
 90 |           "autofocus": false,
 91 |           "disabled": false,
 92 |           "required": true,
 93 |           "readonly": false,
 94 |           "pattern": "",
 95 |           "class": "",
 96 |           "placeholder": "请输入公司地址",
 97 |           "title": "公司地址",
 98 |           "autocomplete": "on",
 99 |           "size": 30,
100 |           "maxlength": 50,
101 |           "optionKey": "",
102 |           "optionList": [],
103 |           "tdCount":1
104 |         },
105 |         "1005": {
106 |           "controlId": "1005",
107 |           "colName": "telphone",
108 |           "controlType": 103,
109 |           "isClear": true,
110 |           "defaultValue": "",
111 |           "autofocus": false,
112 |           "disabled": false,
113 |           "required": true,
114 |           "readonly": false,
115 |           "pattern": "",
116 |           "class": "",
117 |           "placeholder": "请输入公司电话",
118 |           "title": "公司电话",
119 |           "autocomplete": "on",
120 |           "size": 30,
121 |           "maxlength": 50,
122 |           "optionKey": "",
123 |           "optionList": [],
124 |           "tdCount":1
125 |         },
126 |         "1006": {
127 |           "controlId": "1006",
128 |           "colName": "URL",
129 |           "controlType": 105,
130 |           "isClear": true,
131 |           "defaultValue": "",
132 |           "autofocus": false,
133 |           "disabled": false,
134 |           "required": true,
135 |           "readonly": false,
136 |           "pattern": "",
137 |           "class": "",
138 |           "placeholder": "https://www.",
139 |           "title": "公司网址",
140 |           "autocomplete": "on",
141 |           "size": 30,
142 |           "maxlength": 50,
143 |           "optionKey": "",
144 |           "optionList": [],
145 |           "tdCount":1
146 |         },
147 |         "1007": {
148 |           "controlId": "1007",
149 |           "colName": "Email",
150 |           "controlType": 104,
151 |           "isClear": true,
152 |           "defaultValue": "",
153 |           "autofocus": false,
154 |           "disabled": false,
155 |           "required": true,
156 |           "readonly": false,
157 |           "pattern": "",
158 |           "class": "",
159 |           "placeholder": "@",
160 |           "title": "公司邮件",
161 |           "autocomplete": "on",
162 |           "size": 30,
163 |           "maxlength": 50,
164 |           "optionKey": "",
165 |           "optionList": [],
166 |           "tdCount":1
167 |         },
168 |         "1008": {
169 |           "controlId": 1008,
170 |           "colName": "type",
171 |           "title": "公司类型",
172 |           "controlType": 190,
173 |           "isClear": true,
174 |           "defaultValue": "",
175 |           "autofocus": false,
176 |           "disabled": false,
177 |           "required": true,
178 |           "pattern": "",
179 |           "class": "",
180 |           "optionList": [
181 |             { "value": 1, "title": "有限责任公司" },
182 |             { "value": 2, "title": "股份有限责任公司" },
183 |             { "value": 3, "title": "个人独资企业" },
184 |             { "value": 4, "title": "合伙企业" },
185 |             { "value": 5, "title": "个体工商户" }
186 |           ],
187 |           "tdCount":1
188 |         },
189 |         "1009": {
190 |           "controlId": 1009,
191 |           "colName": "createDate",
192 |           "controlType": 140,
193 |           "isClear": true,
194 |           "defaultValue": "",
195 |           "autofocus": false,
196 |           "disabled": false,
197 |           "required": true,
198 |           "readonly": false,
199 |           "pattern": "",
200 |           "class": "",
201 |           "title": "成立日期",
202 |           "min": "1950-01-01",
203 |           "max": "2999-12-31",
204 |           "step": 1,
205 |           "tdCount":1
206 |         },
207 |         "1010":{
208 |           "controlId": "2012",
209 |           "colName": "education",
210 |           "controlType": 183,
211 |           "isClear": true,
212 |           "disabled": false,
213 |           "required": true,
214 |           "readonly": false,
215 |           "pattern": "",
216 |           "class": "",
217 |           "placeholder": "",
218 |           "title": "学历",
219 |           "optionList": [
220 |               { "value": 1, "title": "高中" },
221 |               { "value": 2, "title": "大专" },
222 |               { "value": 3, "title": "本科" },
223 |               { "value": 4, "title": "硕士" },
224 |               { "value": 5, "title": "博士" }
225 |           ]
226 |         },
227 |         "1011":{
228 |             "controlId": 100,
229 |             "colName": "hobby",
230 |             "controlType": 182,
231 |             "isClear": true,
232 |             "disabled": false,
233 |             "required": true,
234 |             "readonly": false,
235 |             "pattern": "",
236 |             "class": "",
237 |             "title": "爱好",
238 |             "optionList": [
239 |               { "value": 1, "title": "篮球" },
240 |               { "value": 2, "title": "足球" },
241 |               { "value": 3, "title": "排球" }
242 |             ] 
243 |         }
244 |       }
245 |     },
246 |     "person":{
247 |       "formMeta":{
248 |         "name":"person",
249 |         "allColumn":[2000,2001,2002,2003,2012,2030],
250 |         "state":"add",
251 |         "colCount":1
252 |       },
253 |       "formItem":{
254 |         "2000":{
255 |             "controlId": 2000,
256 |             "colName": "personId",
257 |             "controlType": 101,
258 |             "isClear": true,
259 |             "disabled": false,
260 |             "required": true,
261 |             "readonly": false,
262 |             "pattern": "",
263 |             "class": "",
264 |             "placeholder": "请输入",
265 |             "title": "工号",
266 |             "autocomplete": "on",
267 |             "size": 10,
268 |             "maxlength": 10,
269 |             "optionList": [] 
270 |         },
271 |         "2001":{
272 |             "controlId": 2001,
273 |             "colName": "personName",
274 |             "controlType": 101,
275 |             "isClear": true,
276 |             "disabled": false,
277 |             "required": true,
278 |             "readonly": false,
279 |             "pattern": "",
280 |             "class": "",
281 |             "placeholder": "请输入员工姓名",
282 |             "title": "姓名",
283 |             "autocomplete": "on",
284 |             "size": 10,
285 |             "maxlength": "50" 
286 |         },
287 |         "2002": {
288 |             "controlId": 2002,
289 |             "colName": "Gender",
290 |             "controlType": 183,
291 |             "isClear": true,
292 |             "disabled": false,
293 |             "required": true,
294 |             "readonly": false,
295 |             "pattern": "",
296 |             "class": "",
297 |             "title": "性别",
298 |             "optionList": [
299 |               { "value": "男", "title": "男" },
300 |               { "value": "女", "title": "女" }
301 |             ] 
302 |         },
303 |         "2003":{
304 |             "controlId": 2012,
305 |             "colName": "nation",
306 |             "controlType": 106,
307 |             "isClear": true,
308 |             "disabled": false,
309 |             "required": true,
310 |             "readonly": false,
311 |             "pattern": "",
312 |             "class": "",
313 |             "placeholder": "请输入员工姓名",
314 |             "title": "民族",
315 |             "optionKey": "minzu",
316 |             "optionList": [
317 |                 { "value": 1, "title": "汉" },
318 |                 { "value": 2, "title": "蒙古" },
319 |                 { "value": 3, "title": "满族" },
320 |                 { "value": 4, "title": "回族" },
321 |                 { "value": 5, "title": "朝鲜" }
322 |             ]
323 |         },
324 |         "2012":{
325 |             "controlId": 2012,
326 |             "colName": "education",
327 |             "controlType": 190,
328 |             "isClear": true,
329 |             "disabled": false,
330 |             "required": true,
331 |             "readonly": false,
332 |             "pattern": "",
333 |             "class": "",
334 |             "placeholder": "",
335 |             "title": "学历",
336 |             "optionList": [
337 |                 { "value": 1, "title": "高中" },
338 |                 { "value": 2, "title": "大专" },
339 |                 { "value": 3, "title": "本科" },
340 |                 { "value": 4, "title": "硕士" },
341 |                 { "value": 5, "title": "博士" }
342 |             ]
343 |         },
344 |         "2030":{
345 |             "controlId": 2030,
346 |             "colName": "hobby",
347 |             "controlType": 182,
348 |             "isClear": true,
349 |             "disabled": false,
350 |             "required": true,
351 |             "readonly": false,
352 |             "pattern": "",
353 |             "class": "",
354 |             "title": "爱好",
355 |             "optionList": [
356 |               { "value": 1, "title": "篮球" },
357 |               { "value": 2, "title": "足球" },
358 |               { "value": 3, "title": "排球" }
359 |             ] 
360 |         }
361 |       }
362 |     }
363 | }


--------------------------------------------------------------------------------
/cnd/project-vuex/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <link rel="icon" href="public/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>CDN 的工程化开发 的模板</title>
 9 |   <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
10 |   <script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
11 |   <script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js"></script>
12 |   <link href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css" rel="stylesheet">
13 |   <script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></script>
14 |   <!--axios-->
15 |   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
16 |   <script type="text/javascript">
17 |     let basrUrl = '/src/' // 假定 src在网站根目录
18 |     // 判断所处网站，确定基础url
19 |     switch (window.location.origin) {
20 |       case 'https://naturefwvue.github.io': //github
21 |         basrUrl = '/nf-vue-cnd/cnd/project-vuex/src/'
22 |         break
23 |     }
24 |     window.__ver = '?v=44'
25 |     window.__basrUrl = basrUrl
26 | 
27 |   </script>
28 |   <script type="module" src="src/script/appImport.js"></script>
29 |   <style>
30 |     #app {
31 |       font-family: Avenir, Helvetica, Arial, sans-serif;
32 |       -webkit-font-smoothing: antialiased;
33 |       -moz-osx-font-smoothing: grayscale;
34 |       text-align: center;
35 |       color: #2c3e50;
36 |     }
37 |     #nav {
38 |       padding: 30px;
39 |     }
40 |     #nav a {
41 |       font-weight: bold;
42 |       color: #2c3e50;
43 |     }
44 |     #nav a.router-link-exact-active {
45 |       color: #42b983;
46 |     }
47 |   </style>
48 | </head>
49 | <body>
50 |   <div>
51 |     这里演示一下vuex的演示...
52 |   </div>
53 |   <div id="app">
54 |     <div id="nav">
55 |       <p>
56 |         <router-link :to="{name:'Home'}">首页</router-link>&nbsp;&nbsp;&nbsp;
57 |         <router-link :to="{name:'state'}">state 的演示</router-link>&nbsp;&nbsp;&nbsp;
58 |         <router-link :to="{name:'state2'}">state2 的演示</router-link>&nbsp;&nbsp;&nbsp;
59 |         <router-link :to="{name:'getter'}">getter 的演示</router-link>&nbsp;&nbsp;&nbsp;
60 |         <router-link :to="{name:'setter'}">setter 的演示</router-link>&nbsp;&nbsp;&nbsp;
61 |         <router-link :to="{name:'action'}">action 的演示</router-link>&nbsp;&nbsp;&nbsp;
62 |         <router-link :to="{name:'module'}">module 的演示</router-link>&nbsp;&nbsp;&nbsp;
63 |       </p>
64 |       <hr>
65 |       <div style="text-align: left;margin-left: 200px;">
66 |         <router-view></router-view>
67 |       </div>
68 |     </div>
69 |     <div style="text-align: left;">
70 |       vuex状态演示<br>
71 |       模板：<br>
72 |       $store ：{{$store.state}} <br>
73 |       $store - myObject ：{{$store.state.myObject}}<br>
74 |      
75 |       <el-button type="primary" @click="setCount">更新状态</el-button><br>
76 |       <hr>
77 |     </div>
78 |     <hr>
79 |     
80 |   
81 |   <script type="module" src="src/main.js"></script>
82 | </body>
83 | </html>
84 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/project-vuex/public/favicon.ico


--------------------------------------------------------------------------------
/cnd/project-vuex/src/app.js:
--------------------------------------------------------------------------------
 1 |   
 2 |   // import { Set_Count, Set_Count_sy } from './store/mutation-types.js'
 3 | 
 4 |   export default {
 5 |     setup() {
 6 |       const store = Vuex.useStore()
 7 |   
 8 |       // 状态的控制事件
 9 |       const setCount = () =>{
10 |         store.commit('setCount')
11 |         store.commit('setTime')
12 |         store.commit('setArray')
13 |         // store._mutations.setCount[0] // 这是什么？
14 |       }
15 |     
16 |       return {
17 |         // 设置state
18 |         setCount
19 |       }
20 |     }
21 |   }


--------------------------------------------------------------------------------
/cnd/project-vuex/src/component/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <h1>{{ msg1 }}</h1>
 5 |     <p>
 6 |       尝试一下vue文件，目前没找到方法，也许需要Babel和webpack。
 7 |     </p>
 8 |     
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   name: 'HelloWorld',
15 |   props: {
16 |     msg: String
17 |   },
18 |   setup () {
19 |     const msg1 = '存cdn方式'
20 |     return {
21 |       msg1
22 |     }
23 |   }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/src/component/test.html:
--------------------------------------------------------------------------------
1 | <div>
2 |     这是一个测试看看动态加载的组件
3 |     <h1>{{title}}</h1>
4 | </div>


--------------------------------------------------------------------------------
/cnd/project-vuex/src/component/test.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const aa = '外部定义'
 3 | 
 4 | const test = {
 5 |   template: `
 6 |       这是 组件测试<br>
 7 |       参数：{{str1}}<br>
 8 |       外部函数：{{aa}}<br>
 9 |   `,
10 |   props: {
11 |     str: String
12 |   },
13 |   setup(props) {
14 |     // 在setup里面获取参数值
15 |     const str1 = Vue.ref(props.str)
16 |     // alert('test的alert')
17 |     return {
18 |       str1,
19 |       aa
20 |     }
21 |   }
22 | }
23 | 
24 | export default test


--------------------------------------------------------------------------------
/cnd/project-vuex/src/main.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | import store from './store/index.js?v=28'
 3 | import router from './router/index.js?v=28'
 4 | import App from './app.js?v=28'
 5 | 
 6 | 
 7 | // 创建vue3的实例
 8 | const app = Vue.createApp(App)
 9 |   .use(store) // 挂载vuex
10 |   .use(router) // 挂载路由
11 |   .use(ElementPlus) // 加载ElementPlus
12 |   .mount('#app') // 挂载Vue的app实例
13 | 
14 | */
15 | 
16 | const ver = window.__ver || ''
17 | 
18 | Promise.all([
19 |   import('./store/index.js' + ver),
20 |   import('./router/index.js' + ver),
21 |   import('./app.js' + ver),
22 | ]).then((res) => {
23 |   // 创建vue3的实例
24 |   const app = Vue.createApp(res[2].default)
25 |     .use(res[0].default) // 挂载vuex
26 |     .use(res[1].default) // 挂载路由
27 |     .use(ElementPlus) // 加载ElementPlus
28 |     .mount('#app') // 挂载Vue的app实例
29 | })
30 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/src/router/index.js:
--------------------------------------------------------------------------------
 1 | // import myImport from '../script/myImport.js?v=29'
 2 | 
 3 | const routes = [
 4 |   {
 5 |     path: '/',
 6 |     name: 'Home',
 7 |     component: () => myImport('views/home')
 8 |   },
 9 |   {
10 |     path: '/state',
11 |     name: 'state',
12 |     component: () => myImport('views/01stateall')
13 |   },
14 |   {
15 |     path: '/state2',
16 |     name: 'state2',
17 |     component: () => myImport('views/02statemember')
18 |   },
19 |   {
20 |     path: '/getter',
21 |     name: 'getter',
22 |     component: () => myImport('views/03getter')
23 |   },
24 |   {
25 |     path: '/setter',
26 |     name: 'setter',
27 |     component: () => myImport('views/04setter')
28 |   },
29 |   {
30 |     path: '/action',
31 |     name: 'action',
32 |     component: () => myImport('views/05action')
33 |   },
34 |   {
35 |     path: '/module',
36 |     name: 'module',
37 |     component: () => myImport('views/06module')
38 |   }
39 | ]
40 | 
41 | const router = VueRouter.createRouter({
42 |   history: VueRouter.createWebHistory(),
43 |   routes
44 | })
45 | 
46 | export default router
47 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/src/script/appImport.js:
--------------------------------------------------------------------------------
 1 | // 直接放在Window里面好了。。。
 2 | window.myImport = (url) => {
 3 |   return new Promise((resolve, reject) => {
 4 |     const ver = window.__ver || ''
 5 |     const baseUrl = window.__basrUrl || '/src/'
 6 |     // 先加载js
 7 |     import(baseUrl + url + '.js' + ver).then((resjs) => {
 8 |       const js = resjs.default
 9 |       if (js.template === '') {
10 |         // 如果模板是空的，表示需要加载html作为模板
11 |         axios.get(baseUrl + url + '.html' + ver).then((resHTML) => {
12 |           js.template = resHTML.data
13 |           resolve(js)
14 |         })
15 |       } else {
16 |         // 否则直接使用js注册组件
17 |         resolve(js)
18 |       }
19 |     })
20 |   })
21 | }
22 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/src/script/myImport.js:
--------------------------------------------------------------------------------
 1 | // 同步加载的方式
 2 | const myImport2 = (url) => {
 3 |   return new Promise((resolve, reject) => {
 4 |     const ver = window.__ver || ''
 5 |     const baseUrl = window.__basrUrl || '/src/'
 6 |     Promise.all([
 7 |       axios.get(baseUrl + url + '.html' + ver),
 8 |       import(baseUrl + url + '.js' + ver)
 9 |     ]).then((req) => {
10 |       resolve({
11 |         template: req[0].data,
12 |         props: req[1].default.props,
13 |         setup: req[1].default.setup
14 |       })
15 |     })
16 |   })
17 | }
18 | 
19 | // 加载html和js
20 | const myImport = (url) => {
21 |   return new Promise((resolve, reject) => {
22 |     const ver = window.__ver || ''
23 |     const baseUrl = window.__basrUrl || '/src/'
24 |     // 先加载js
25 |     import(baseUrl + url + '.js' + ver).then((resjs) => {
26 |       const js = resjs.default
27 |       if (js.template === '') {
28 |         // 如果模板是空的，表示需要加载html作为模板
29 |         axios.get(baseUrl + url + '.html' + ver).then((resHTML) => {
30 |           js.template = resHTML.data
31 |           resolve(js)
32 |         })
33 |       } else {
34 |         // 否则直接使用js注册组件
35 |         resolve(js)
36 |       }
37 |     })
38 |   })
39 | }
40 | 
41 | export default myImport


--------------------------------------------------------------------------------
/cnd/project-vuex/src/store/index.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import { Set_Count, Set_Count_sy } from './mutation-types.js'
  3 | 
  4 | import user from './user.js'
  5 | 
  6 | const myPlugin = store => {
  7 |   console.log('插件--store', store)
  8 |   // 当 store 初始化后调用
  9 |   store.subscribe((mutation, state) => {
 10 |     console.log('插件--store', store)
 11 |     console.log('插件--', mutation)
 12 | 
 13 |     // 每次 mutation 之后调用
 14 |     // mutation 的格式为 { type, payload }
 15 | 
 16 |   })
 17 | }
 18 | 
 19 | export default Vuex.createStore({
 20 |   // plugins: [myPlugin],
 21 |   state: {
 22 |     count: 0,
 23 |     myObject: {
 24 |       time: '现在的时间：'
 25 |     },
 26 |     myArray: [1,2,2,3,4]
 27 |   },
 28 |   getters: {
 29 |     getAddCount: (state) => {
 30 |       return state.count + 1
 31 |     },
 32 |     getTime: (state) => {
 33 |       return state.myObject.time + new Date()
 34 |     },
 35 |     filterArray: (state) => (id) => {
 36 |       return state.myArray.filter((item) => item === id)
 37 |     }
 38 |   },
 39 |   mutations: {
 40 |     // 计数器
 41 |     setCount(state, num = 1) {
 42 |       state.count += num
 43 | 
 44 |     },
 45 |     [Set_Count](state, num = 1) {
 46 |       state.count += num
 47 |     },
 48 |     // 设置当前时间
 49 |     setTime(state) {
 50 |       state.myObject.time = '现在时间：' + new Date()
 51 | 
 52 |     },
 53 |     // 设置数组的值
 54 |     setArray(state, val = 4) {
 55 |       state.myArray[1] = val
 56 |     },
 57 |     reloadArray(state, arr) {
 58 |       state.myArray.lenth = 0
 59 |       state.myArray = [...arr]
 60 |     }
 61 |   },
 62 |   actions: {
 63 |     // 异步获取数组
 64 |     getArray(context) {
 65 |       console.log('================================')
 66 |       console.log('异步getArray——context', context)
 67 |       setTimeout(() => {
 68 |         context.commit('setArray', new Date().valueOf())
 69 |       }, 10000)
 70 |     },
 71 |     // 异步获取数组
 72 |     getArrayPromise(context) {
 73 |       return new Promise((resolve, reject) => {
 74 |         console.log('================================')
 75 |         console.log('异步 getArrayPromise ——context', context)
 76 |         setTimeout(() => {
 77 |           const time = new Date().valueOf()
 78 |           // context.commit('setArray', time)
 79 |           resolve(time)
 80 |         }, 2000)
 81 |       })
 82 |     },
 83 |     // axios
 84 |     getData(context) {
 85 |       return new Promise((resolve, reject) => {
 86 |         axios.get('demo.json')
 87 |           .then((response) => {
 88 |             const arr = response.data.company.formItem
 89 |             console.log('getData - axios - response', response)
 90 |             // context.commit('reloadArray', response.data.company.formItem)
 91 |             resolve(arr)
 92 |           })
 93 |           .catch((error) => {
 94 |             console.log('getData - axios - error', error)
 95 |           })
 96 |       })
 97 |     },
 98 |     // axios
 99 |     getDat2(context) {
100 |       const ajax = axios.get('demo.json')
101 |       ajax.then((response) => {
102 |           const arr = response.data.company.formItem
103 |           console.log('getData - axios - response', arr)
104 |           // context.commit('reloadArray', arr)
105 |         })
106 |         .catch((error) => {
107 |           console.log('getData - axios - error', error)
108 |         })
109 |       return ajax // 直接返回 axios 的promise的实例
110 |     }
111 |   },
112 |   modules: {
113 |     myObject: user,
114 |     user: user,
115 |     person: user
116 |   }
117 | })
118 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/src/store/map.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const map = () => {
 3 |   const store = Vuex.useStore()
 4 |     
 5 |   /**
 6 |   * 获取count，
 7 |   * 用computed实现相应
 8 |   */
 9 |   const getCount = () => {
10 |     return Vue.computed(() => store.state.count)
11 |   }
12 | 
13 |   /**
14 |   * 获取count，
15 |   ** 用 ref 实现相应
16 |   */
17 |   const getRefCount = () => {
18 |     return Vue.ref(store.state.count)
19 |   }
20 | 
21 |   /**
22 |   * 获取对象
23 |   */
24 |   const getObject = () => {
25 |     return store.state.myObject
26 |   }
27 | 
28 |   /**
29 |   * 获取只读对象
30 |   */
31 |   const getReadonlyObject = () => {
32 |     return Vue.readonly(store.state.myObject)
33 |   }
34 | 
35 |   /**
36 |   * 获取数组
37 |   */
38 |   const getArray = () => {
39 |     return store.state.myArray
40 |   }
41 |   /**
42 |   * 获取只读数组
43 |   */
44 |   const getReadonlyArray = () => {
45 |     return Vue.readonly(store.state.myArray)
46 |   }
47 | 
48 |   /**
49 |   * 查询数组
50 |   ** id：要查询的数据
51 |   */
52 |   const filterArray = (id) => {
53 |     return  Vue.computed(() => store.getters.filterArray(id))
54 |   }
55 | 
56 |   return {
57 |     getCount,
58 |     getRefCount,
59 |     getObject,
60 |     getReadonlyObject,
61 |     getArray,
62 |     getReadonlyArray,
63 |     filterArray
64 |   }
65 | 
66 | }
67 | 
68 | export default map


--------------------------------------------------------------------------------
/cnd/project-vuex/src/store/map2.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | /*
 4 |  * 获取计数器
 5 | */
 6 | export const getCount = () => {
 7 |   return Vuex.useStore().state.count
 8 | }
 9 | 
10 | export const getCount1 = () => {
11 |   return Vuex.useStore().state.state.getter.getCount
12 | }
13 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/src/store/mutation-types.js:
--------------------------------------------------------------------------------
1 | export const Set_Count = 'set_count'
2 | export const Set_Count_sy = Symbol('set_count')
3 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/src/store/user.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const user = {
 3 |   namespaced: true, // 避免重名
 4 |   state: () => ({
 5 |     userInfo: {
 6 |       userId: 123,
 7 |       userCode: '',
 8 |       userNick: ''
 9 |     },
10 |     userRole: []
11 |   }),
12 |   mutations: { 
13 |     setUser(state, code) {
14 |       state.userInfo.userCode = code
15 |     }
16 |   },
17 |   getters: {
18 |     getUser(state)  {
19 |       return state.userInfo
20 |     } 
21 |   },
22 |   actions: {
23 |     // { state, commit, rootState }
24 |     setUsera (store, code) {
25 |       store.commit('setUser', code)
26 |     }
27 |   }
28 | }
29 | 
30 | export default user


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/01stateall.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   整体22：<br>
 3 |   allState ：{{allState}}<br>
 4 |   
 5 |   成员 ：<br>
 6 |   memberCount ： {{memberCount}} （用简单类型的成员定义，没有相应性）<br>
 7 |   memberObject ：{{memberObject}} （用引用类型的成员定义，自带响应性）<br>
 8 | 
 9 | </div>
10 |   


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/01stateall.js:
--------------------------------------------------------------------------------
 1 | 
 2 |  // 整体获取
 3 |  const allStateManage = () => {
 4 |     const store = Vuex.useStore()
 5 | 
 6 |     // 看看state的类型
 7 |     console.log('state：', store.state)
 8 |     console.log('state.count：', store.state.count)
 9 |     console.log('state.myObject：', store.state.myObject)
10 | 
11 |     // 获得整体的state
12 |     const allState = store.state
13 |     console.log('allState：', allState)
14 |     console.log('================')
15 | 
16 |     // 定时修改 count 看响应性
17 |     setTimeout(() => {
18 |       // store.commit('setCount')
19 |       allState.count += 101 // 会直接改vuex的state
20 |     }, 1000)
21 |     
22 |     return {
23 |       allState
24 |     }
25 |   }
26 | 
27 |   
28 | export default {
29 |     name: 'vuex_state_all',
30 |     template: '',
31 |     components: {
32 |     },
33 |     setup () {
34 |       const value = Vue.ref('state_all')
35 |    
36 |       // 获取state
37 |       const { allState } = allStateManage()
38 | 
39 |       return {
40 |         value,
41 |         allState
42 |       }
43 |     }
44 |   }
45 |   


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/02statemember.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   间接获取：<br>
3 |   refCount ：{{refCount}} （ref）<br>
4 |   comCount ：{{comCount}} （计算属性） <br>
5 |   readonlyObject ： {{readonlyObject}} （只读的reactive）
6 | </div>
7 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/02statemember.js:
--------------------------------------------------------------------------------
 1 | 
 2 |   // 直接获取state的成员
 3 |   const stateMemberManage = () => {
 4 |     const store = Vuex.useStore()
 5 |     
 6 |     // 看看state的类型
 7 |     let memberCount = store.state.count // 失去响应性
 8 |     const memberObject = store.state.myObject
 9 |     console.log('memberCount', memberCount)
10 |     console.log('memberObject', memberObject)
11 |     console.log('================')
12 | 
13 |     // 定时修改 count 看响应性
14 |     setTimeout(() => {
15 |       // memberCount += 101 
16 |       // const 定义的会报错，不允许赋值，常量。
17 |       // let 定义的可以修改，但是没有相应性
18 |     }, 1000)
19 |     
20 |     return {
21 |       memberCount,
22 |       memberObject
23 |     }
24 |   }
25 | 
26 |   
27 | export default {
28 |     name: 'vuex_action',
29 |     template: '',
30 |     components: {
31 |     },
32 |     setup () {
33 |       const value = Vue.ref('测试动态加载组件333')
34 |   
35 |       // action
36 |       const { memberCount, memberObject } = stateMemberManage()
37 |   
38 |       return {
39 |         value,
40 |         memberCount,
41 |         memberObject
42 |       }
43 |     }
44 |   }
45 |   


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/03getter.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   这里演示一下 vuex 的 getter 的相关操作：<br>
 3 |   
 4 |   addCount ：{{addCount}} （计算属性，导致整体都 +1）<br>
 5 |   getAddCount ：{{getAddCount}} （getter，自己没有相应性）<br>
 6 |   comGetAddCount ：{{comGetAddCount}} （getter，需要套一个computed才能相应）<br>
 7 |   filterArray ：{{filterArray}} （getter，需要套一个computed才能相应）<br>
 8 |   comFilterArray ：{{comFilterArray}} （getter，需要套一个computed才能相应）<br>
 9 |   
10 | </div>


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/03getter.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   // 间接获取
 4 |   const indirectManage = () => {
 5 |     const store = Vuex.useStore()
 6 | 
 7 |     // 用toRef获取 count，有相应性，可以直接修改state
 8 |     const refCount = Vue.toRef(store.state, 'count')
 9 |     // 计算属性获取count，有相应性，不可以直接修改state
10 |     const comCount = '' // Vue.computed(() => store.state.count)
11 |     // 只读的对象，有相应性，浅层不可以修改，但是深层还是可以修改。
12 |     const readonlyObject = Vue.readonly(store.state.myObject)
13 | 
14 |     console.log('refCount：', refCount)
15 |     console.log('comCount：', comCount)
16 |     console.log('readonlyObject：', readonlyObject)
17 |     console.log('================')
18 | 
19 |     // 定时修改 count 看响应性
20 |     setTimeout(() => {
21 |       // store.commit('setCount')
22 |       // refCount.value += 200 // 会直接改vuex的state
23 |     }, 2000)
24 |    
25 |     return {
26 |       refCount,
27 |       comCount,
28 |       readonlyObject
29 |     }
30 |   }
31 | 
32 | 
33 | // 处理后返回
34 | const operationManage = () => {
35 |   const store = Vuex.useStore()
36 |   // 计算属性获取count
37 |   const addCount = Vue.computed(() => store.state.count + 1)
38 |   const getAddCount = store.getters.getAddCount
39 |   const comGetAddCount = Vue.computed(() => store.getters.getAddCount)
40 |   const filterArray = store.getters.filterArray(2)
41 |   const comFilterArray = Vue.computed(() => store.getters.filterArray(2))
42 | 
43 |   console.log('addCount ：', addCount)
44 |   console.log('getAddCount ：', getAddCount)
45 |   console.log('comGetAddCount ：', comGetAddCount)
46 |   console.log('filterArray ：', filterArray)
47 |   console.log('comFilterArray ：', comFilterArray)
48 |   console.log('================')
49 | 
50 |   return {
51 |     addCount,
52 |     getAddCount,
53 |     comGetAddCount,
54 |     filterArray,
55 |     comFilterArray
56 |   }
57 | 
58 | }
59 | 
60 | export default {
61 |     name: 'vuex_getter',
62 |     template: '',
63 |     components: {
64 |     },
65 |     setup () {
66 |       const value = Vue.ref('getter')
67 |       
68 |       // 间接获取成员
69 |       const { refCount, comCount, readonlyObject } = indirectManage()
70 |    
71 |       // 间接获取成员
72 |       const {
73 |         addCount,
74 |         getAddCount,
75 |         comGetAddCount,
76 |         filterArray,
77 |         comFilterArray
78 |       } = operationManage()
79 |   
80 |       return {
81 |         value,
82 |         addCount,
83 |         getAddCount,
84 |         comGetAddCount,
85 |         filterArray,
86 |         comFilterArray,
87 |         refCount, comCount, readonlyObject
88 |       }
89 |     }
90 |   }
91 |   


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/04setter.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   这里演示一下 vuex 的 mutations 的相关操作：<br>
3 |   commitSetCount ：{{commitSetCount}}<br>
4 | </div>


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/04setter.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | // 设置state
 4 | const mutationsManage = () => {
 5 |   const store = Vuex.useStore()
 6 | 
 7 |   let commitSetCount = Vue.computed({
 8 |       get: () => store.state.count + 1,
 9 |       set: (val) => {
10 |       // store.commit('setCount', val)
11 |       }
12 |   })
13 |   console.log('commitSetCount ：', commitSetCount)
14 |   console.log('================')
15 | 
16 |   // 定时修改 count 看响应性
17 |   setTimeout(() => {
18 |       // commitSetCount.value = 202 // 会直接改vuex的state
19 |   }, 2000)
20 | 
21 |   return {
22 |       commitSetCount
23 |   }
24 | }
25 | 
26 | export default {
27 |   name: 'vuex_setter',
28 |   template: '',
29 |   components: {
30 |   },
31 |   setup () {
32 |     const value = Vue.ref('setter')
33 |     
34 |     // mutations 
35 |     const { commitSetCount } = mutationsManage()
36 | 
37 |     return {
38 |       value,
39 |       // 突变
40 |       commitSetCount,
41 |     }
42 |   }
43 | }
44 |   


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/05action.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   这里演示一下 vuex 的 action 的相关操作<br>
3 |   value22 ：{{value}}<br>
4 | 
5 | </div>


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/05action.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // 异步操作
 3 | const actionManame = () => {
 4 |   const store = Vuex.useStore()
 5 | 
 6 |   const getArray = store.dispatch('getArray')
 7 |   console.log('外部调用 getArray', getArray)
 8 |   getArray.then((data) => {
 9 |     console.log('===========')
10 |     console.log('getArray 异步操作完成，返回数据：', data)
11 |     console.log('===========')
12 |   })
13 | 
14 |   const getArrayPromise = store.dispatch('getArrayPromise')
15 |   console.log('外部调用 getArrayPromise', getArrayPromise)
16 |   getArrayPromise.then((data) => {
17 |     console.log('===========')
18 |     console.log('getArrayPromise 异步操作完成，返回数据：', data)
19 |     console.log('===========')
20 |   })
21 | 
22 |   store.dispatch('getData').then((data) => {
23 |     console.log('===========')
24 |     console.log('getData 异步操作完成，返回数据：', data)
25 |     console.log('===========')
26 |     
27 |   })
28 | 
29 |   return {
30 |     getArray,
31 |     getArrayPromise
32 |   }
33 | } 
34 | 
35 | 
36 | export default {
37 |   name: 'vuex_action',
38 |   template: '',
39 |   components: {
40 |   },
41 |   setup () {
42 |     const value = Vue.ref('测试动态加载组件333')
43 | 
44 |     // action
45 |     const { getArray, getArrayPromise } = actionManame()
46 | 
47 |     return {
48 |       value,
49 |       getArray,
50 |       getArrayPromise
51 |     }
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/06map.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   封装：<br>
3 |   mapCount ：{{mapCount}}<br>
4 |   <br>
5 | </div>


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/06map.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import map from './store/map.js?v=12'
 3 | 
 4 | export default {
 5 |     name: 'vuex_map',
 6 |     template: '',
 7 |     components: {
 8 |     },
 9 |     setup () {
10 |       const value = Vue.ref('map')
11 |   
12 |       // 通过map 获取 count
13 |       // 可以使用别名
14 |       const {
15 |         getCount: mapGetCount
16 |       } = map()
17 | 
18 |       const mapCount = mapGetCount()
19 |       return {
20 |         value,
21 |         mapCount
22 |       }
23 |     }
24 |   }
25 |   


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/06module.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   模块演示：<br>
3 |   用户信息： {{userInfo}}
4 | </div>


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/06module.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const moduleManage = () => {
 3 |   const store = Vuex.useStore()
 4 | 
 5 |   const userInfo = store.state.user.userInfo
 6 | 
 7 |   const userInfo2 = store.getters['user/getUser']
 8 | 
 9 |   // store.commit('setUser', '没有命名空间的code')
10 | 
11 |   // store.dispatch('setUsera', 'actionde的code')
12 | 
13 |   store.commit('user/setUser', 'user的code')
14 |   store.commit('myObject/setUser', 'myObject的code')
15 |   store.commit('person/setUser', 'person的code')
16 | 
17 |   store.dispatch('user/setUsera', 'action的user的code')
18 |   
19 | 
20 |   return {
21 |     userInfo,
22 |     userInfo2
23 |   }
24 | }
25 | 
26 | export default {
27 |   name: 'vuex_module',
28 |   template: '',
29 |   components: {
30 |   },
31 |   setup () {
32 |     const value = Vue.ref('module')
33 |     
34 |     const {
35 |       userInfo
36 |     } = moduleManage()
37 | 
38 |     return {
39 |       value,
40 |       userInfo
41 |     }
42 |   }
43 | }
44 |   


--------------------------------------------------------------------------------
/cnd/project-vuex/src/views/home.js:
--------------------------------------------------------------------------------
 1 | const { ref } = Vue
 2 | 
 3 | const testManage = () => {
 4 |   const hello = ref('你好，世界')
 5 |   const clickMe = () => {
 6 |     hello.value = '好的22，收到' + new Date().valueOf()
 7 |   }
 8 | 
 9 |   return {
10 |     hello,
11 |     clickMe
12 |   }
13 | }
14 | 
15 | // vue3的对象
16 | const home = {
17 |     template: `
18 |         <h2>这是home</h2>
19 |         <div>
20 |           我是{{value.name}}。<br>
21 |           老规矩：{{hello}}<br>
22 |           <input type="button" value="快点我" @click="clickMe"/><br><br>
23 |           本项目采用“混合”模式开发，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
24 |           vue全家桶和UI库用script标签加载。<br>
25 |           代码用import方式加载。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
26 |           目录结构参考了cli建立的项目。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
27 |           支持组件、路由、状态管理等功能。&nbsp;<br>
28 |           状态计数：{{$store.state.count}}&nbsp;&nbsp;&nbsp;
29 |         </div>
30 |     `,
31 |     setup() { // 传说中的setup
32 |       // 使用外面的定义，分解setup内部的代码
33 |       const { hello, clickMe } = testManage()
34 | 
35 |       const value = Vue.reactive({
36 |         name: 'jyk'
37 |       })
38 | 
39 |     
40 |       return {
41 |         value,
42 |         hello,
43 |         clickMe
44 |       }
45 |     }
46 |   }
47 | 
48 |   export default home


--------------------------------------------------------------------------------
/cnd/project-vuex/vuex.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     vuex 的尝试 <br>
 4 |     test: {{test}}<br>
 5 |     computedVuex: {{computedVuex}}<br>
 6 |     get2: {{get2}}<br>
 7 |     get: {{get}}<br>
 8 |     myRef: {{myRef2}}<br>
 9 |     $store：{{$store}}<br>
10 |     <input type="button" @click="add()" value="计数++"> <br>
11 |     <input type="button" @click="setItem('bbb')" value="修改 name 的值"> <br>
12 |     <vuexTest/>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import { ref, computed, getCurrentInstance } from 'vue'
18 | import vuexTest from './vuex2'
19 | 
20 | // @ is an alias to /src
21 | 
22 | export default {
23 |   name: 'vuex1',
24 |   components: {
25 |     vuexTest
26 |   },
27 |   setup (props, context) {
28 |     const test = ref('vuex') // 显示值
29 | 
30 |     const { ctx } = getCurrentInstance()
31 |     console.log('ctx', ctx)
32 |     console.log('vuex1', ctx.$store.state.count)
33 |     const computedVuex = computed(() => ctx.$store.state.count)
34 |     console.log('computedVuex', computedVuex)
35 | 
36 |     // set 设置值
37 |     const cc = ctx.$store.commit('increment')
38 |     console.log('cc', cc)
39 |     console.log('vuex2', ctx.$store.state.count)
40 | 
41 |     const get = ref('')
42 |     get.value = ctx.$store.getters.doneTodos
43 |     console.log('get', get)
44 | 
45 |     const get2 = ref('')
46 |     get2.value = ctx.$store.getters.getTodoById(3)
47 |     console.log('get2', get2)
48 | 
49 |     // ref 测试
50 |     const myRef = ctx.$store.myRef
51 |     console.log('myRef', myRef)
52 |     const myRef2 = ctx.$store.getters.setMyRef
53 |     console.log('myRef2', myRef2)
54 | 
55 |     const add = () => {
56 |       ctx.$store.commit('setMyRef', 3)
57 | 
58 |       ctx.$store.commit('increment', 3)
59 |       test.value = ctx.$store.state.count
60 |       console.log('pp:', ctx.$store.state.myPromies)
61 |       ctx.$store.state.myPromies.then((data) => {
62 |         alert(data)
63 |       })
64 |     }
65 | 
66 |     ctx.$store.dispatch('add1', 10).then((data) => {
67 |       // alert(data)
68 |     })
69 | 
70 |     return {
71 |       add,
72 |       computedVuex,
73 |       get,
74 |       myRef,
75 |       myRef2,
76 |       test
77 |     }
78 |   }
79 | 
80 | }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/cnd/project-vuex/web.config:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <configuration>
 3 |     <system.webServer>
 4 |         <httpErrors errorMode="Custom">
 5 |             <remove statusCode="404" subStatusCode="-1" />
 6 |             <error statusCode="404" prefixLanguageFilePath="" path="/index.html" responseMode="ExecuteURL" />
 7 |         </httpErrors>
 8 |         <security>
 9 |             <requestFiltering>
10 |                 <fileExtensions>
11 |                     <add fileExtension=".vue" allowed="true" />
12 |                 </fileExtensions>
13 |             </requestFiltering>
14 |         </security>
15 |         <staticContent>
16 |             <mimeMap fileExtension=".vue" mimeType="text/html" />
17 |         </staticContent>
18 |     </system.webServer>
19 | </configuration>
20 | 


--------------------------------------------------------------------------------
/cnd/project/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # 一种尝试
 3 | * vue的全家桶和UI库，采用传统的方式加载（CND）。
 4 | * 自己写的js代码，采用ES6的import方式加载。
 5 | * 目录结构采用工程化的项目的结构。
 6 | * 首页用vite项目的首页。
 7 | * 不用babel做转义（因为还不会用）。
 8 | * 不用webpack（因为总是报错，头痛...）。
 9 | 
10 | 
11 | 在线演示：  
12 | https://naturefwvue.github.io/nf-vue-cnd/cnd/project
13 | 
14 | 


--------------------------------------------------------------------------------
/cnd/project/a.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/project/a.html


--------------------------------------------------------------------------------
/cnd/project/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <link rel="icon" href="public/favicon.ico" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>一种怪异的方式</title>
 8 |   <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
 9 |   <script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
10 |   <script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js"></script>
11 |   <link rel="stylesheet" href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css">
12 |   <script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></script>
13 |   <!--axios-->
14 |   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
15 |   <style>
16 |     #app {
17 |       font-family: Avenir, Helvetica, Arial, sans-serif;
18 |       -webkit-font-smoothing: antialiased;
19 |       -moz-osx-font-smoothing: grayscale;
20 |       text-align: center;
21 |       color: #2c3e50;
22 |     }
23 |     #nav {
24 |       padding: 30px;
25 |     }
26 |     #nav a {
27 |       font-weight: bold;
28 |       color: #2c3e50;
29 |     }
30 |     #nav a.router-link-exact-active {
31 |       color: #42b983;
32 |     }
33 |     </style>
34 | </head>
35 | <body>
36 |   <div>
37 |     这是一个尝试...
38 |   </div>
39 |   <div id="app">
40 |     <div id="nav">
41 |       <p>
42 |         <router-link :to="{name:'Home'}">首页</router-link>&nbsp;&nbsp;&nbsp;
43 |         <router-link :to="{name:'state'}">查看状态管理</router-link>&nbsp;&nbsp;&nbsp;
44 |         <router-link :to="{name:'component'}">查看组件加载</router-link>
45 |       </p>
46 |       <router-view></router-view>
47 |     </div>
48 |     <hr>
49 |     vuex状态演示<br>
50 |     $store - count：{{$store.state.count}}<br>
51 |     <el-button type="primary" @click="setCount">vuex的 计数</el-button><br>
52 |     <hr>
53 |     
54 |   <script type="module" src="src/main.js?v=9"></script>
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/cnd/project/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naturefwvue/nf-vue-cnd/7670d199337cc527a04865181c5aacd8168fb901/cnd/project/public/favicon.ico


--------------------------------------------------------------------------------
/cnd/project/src/app.js:
--------------------------------------------------------------------------------
 1 |   
 2 |   // vue3的对象
 3 |   const App = {
 4 |     setup() { // 传说中的setup
 5 |      
 6 |       const store = Vuex.useStore()
 7 |       // 状态的控制事件
 8 |       const setCount = () =>{
 9 |         store.commit('setCount')
10 |       }
11 | 
12 |       return {  // 返回给模板，否则模板访问不到。
13 |         setCount
14 |       }
15 |     }
16 |   }
17 | 
18 |   export default App
19 | 


--------------------------------------------------------------------------------
/cnd/project/src/component/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       尝试一下vue文件，目前没找到方法，也许需要Babel和webpack。
 6 |     </p>
 7 |     
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: 'HelloWorld',
14 |   props: {
15 |     msg: String
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/cnd/project/src/component/test.js:
--------------------------------------------------------------------------------
 1 | const test = {
 2 |     template: `
 3 |         这是 组件测试<br>
 4 |         参数：{{str1}}<br>
 5 |     `,
 6 |     model: {
 7 |       prop: ['str']
 8 |     },
 9 |     props: {
10 |       str: String
11 |     },
12 |     setup(props) {
13 |       // 在setup里面获取参数值
14 |       const str1 = Vue.ref(props.str)
15 |      
16 |       return {
17 |         str1
18 |       }
19 |     }
20 |   }
21 | 
22 |   export default test


--------------------------------------------------------------------------------
/cnd/project/src/main.js:
--------------------------------------------------------------------------------
 1 | import store from './store/index.js?v=6'
 2 | import router from './router/index.js?v=8'
 3 | import App from './app.js?v=6'
 4 | 
 5 | // 创建vue3的实例
 6 | const app = Vue.createApp(App)
 7 |   .use(store) // 挂载vuex
 8 |   .use(router) // 挂载路由
 9 |   .use(ElementPlus) // 加载ElementPlus
10 |   .mount('#app') // 挂载Vue的app实例
11 | 
12 | 


--------------------------------------------------------------------------------
/cnd/project/src/router/index.js:
--------------------------------------------------------------------------------
 1 | // import Home from '../views/home.js?v=2'
 2 | 
 3 | const routes = [
 4 |   {
 5 |     path: '/',
 6 |     name: 'Home',
 7 |     component: () => import('../views/home.js?v=8')
 8 |   },
 9 |   {
10 |     path: '/state',
11 |     name: 'state',
12 |     component: () => import('../views/state.js?v=8')
13 |   },
14 |   {
15 |     path: '/component',
16 |     name: 'component',
17 |     component: () => import('../views/component.js?v=8')
18 |   }
19 | ]
20 | 
21 | const router = VueRouter.createRouter({
22 |   history: VueRouter.createWebHistory(),
23 |   routes
24 | })
25 | 
26 | export default router
27 | 


--------------------------------------------------------------------------------
/cnd/project/src/store/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default Vuex.createStore({
 3 |   state: {
 4 |     count: 0,
 5 |     myObject: {
 6 |       time: '现在的时间'
 7 |     }
 8 |   },
 9 |   getters: {
10 |     getCount: (state) => {
11 |       return state.count
12 |     },
13 |     getMyObject: (state) => {
14 |       return Vue.readonly(state.myObject)
15 |     },
16 |     getTime: (state) => {
17 |       return state.myObject.time
18 |     }
19 |   },
20 |   mutations: {
21 |     setCount(state) {
22 |       state.count++
23 |     },
24 |     setTime(state) {
25 |       state.myObject.time = '现在时间：' + new Date()
26 |     }
27 |   },
28 |   actions: {
29 |   },
30 |   modules: {
31 |   }
32 | })
33 | 


--------------------------------------------------------------------------------
/cnd/project/src/views/component.js:
--------------------------------------------------------------------------------
 1 | // 引入组件
 2 | import test from '../component/test.js?v=7'
 3 | 
 4 | const demo = {
 5 |     template: `
 6 |         <h2>这是组件演示</h2>
 7 |         <test str="传入的参数"></test>
 8 |     `,
 9 |     components: {
10 |       test
11 |     },
12 |     setup() {
13 | 
14 |       return {
15 |       }
16 |     }
17 |   }
18 | 
19 |   export default demo


--------------------------------------------------------------------------------
/cnd/project/src/views/home.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const testManage = () => {
 3 |   const hello = Vue.ref('你好，世界')
 4 |   const clickMe = () => {
 5 |     hello.value = '好的，收到' + new Date().valueOf()
 6 |   }
 7 | 
 8 |   return {
 9 |     hello,
10 |     clickMe
11 |   }
12 | }
13 | 
14 | // vue3的对象
15 | const home = {
16 |     template: `
17 |         <h2>这是home</h2>
18 |         <div>
19 |           我是{{value.name}}。<br>
20 |           老规矩：{{hello}}<br>
21 |           <input type="button" value="快点我" @click="clickMe"/><br><br>
22 |           本项目采用“混合”模式开发，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
23 |           vue全家桶和UI库用script标签加载。<br>
24 |           代码用import方式加载。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
25 |           目录结构参考了cli建立的项目。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
26 |           支持组件、路由、状态管理等功能。&nbsp;<br>
27 |           状态计数：{{$store.state.count}}&nbsp;&nbsp;&nbsp;
28 |         </div>
29 |     `,
30 |     setup() { // 传说中的setup
31 |       // 使用外面的定义，分解setup内部的代码
32 |       const { hello, clickMe } = testManage()
33 | 
34 |       const value = Vue.reactive({
35 |         name: 'jyk'
36 |       })
37 | 
38 |     
39 |       return {
40 |         value,
41 |         hello,
42 |         clickMe
43 |       }
44 |     }
45 |   }
46 | 
47 |   export default home


--------------------------------------------------------------------------------
/cnd/project/src/views/state.js:
--------------------------------------------------------------------------------
 1 | // vue3的对象
 2 | const demo = {
 3 |     template: `
 4 |         <h2>这里是状态演示</h2>
 5 |         setup 里面的 count：{{count}}<br>
 6 |     `,
 7 |     setup() { // 传说中的setup
 8 |       const store = Vuex.useStore()
 9 |       // 在代码里面获取状态
10 |       const count = Vue.computed(() => store.getters.getCount)
11 | 
12 |       return {
13 |         count
14 |       }
15 |     }
16 |   }
17 | 
18 |   export default demo


--------------------------------------------------------------------------------
/cnd/project/vuex.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     vuex 的尝试 <br>
 4 |     test: {{test}}<br>
 5 |     computedVuex: {{computedVuex}}<br>
 6 |     get2: {{get2}}<br>
 7 |     get: {{get}}<br>
 8 |     myRef: {{myRef2}}<br>
 9 |     $store：{{$store}}<br>
10 |     <input type="button" @click="add()" value="计数++"> <br>
11 |     <input type="button" @click="setItem('bbb')" value="修改 name 的值"> <br>
12 |     <vuexTest/>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import { ref, computed, getCurrentInstance } from 'vue'
18 | import vuexTest from './vuex2'
19 | 
20 | // @ is an alias to /src
21 | 
22 | export default {
23 |   name: 'vuex1',
24 |   components: {
25 |     vuexTest
26 |   },
27 |   setup (props, context) {
28 |     const test = ref('vuex') // 显示值
29 | 
30 |     const { ctx } = getCurrentInstance()
31 |     console.log('ctx', ctx)
32 |     console.log('vuex1', ctx.$store.state.count)
33 |     const computedVuex = computed(() => ctx.$store.state.count)
34 |     console.log('computedVuex', computedVuex)
35 | 
36 |     // set 设置值
37 |     const cc = ctx.$store.commit('increment')
38 |     console.log('cc', cc)
39 |     console.log('vuex2', ctx.$store.state.count)
40 | 
41 |     const get = ref('')
42 |     get.value = ctx.$store.getters.doneTodos
43 |     console.log('get', get)
44 | 
45 |     const get2 = ref('')
46 |     get2.value = ctx.$store.getters.getTodoById(3)
47 |     console.log('get2', get2)
48 | 
49 |     // ref 测试
50 |     const myRef = ctx.$store.myRef
51 |     console.log('myRef', myRef)
52 |     const myRef2 = ctx.$store.getters.setMyRef
53 |     console.log('myRef2', myRef2)
54 | 
55 |     const add = () => {
56 |       ctx.$store.commit('setMyRef', 3)
57 | 
58 |       ctx.$store.commit('increment', 3)
59 |       test.value = ctx.$store.state.count
60 |       console.log('pp:', ctx.$store.state.myPromies)
61 |       ctx.$store.state.myPromies.then((data) => {
62 |         alert(data)
63 |       })
64 |     }
65 | 
66 |     ctx.$store.dispatch('add1', 10).then((data) => {
67 |       // alert(data)
68 |     })
69 | 
70 |     return {
71 |       add,
72 |       computedVuex,
73 |       get,
74 |       myRef,
75 |       myRef2,
76 |       test
77 |     }
78 |   }
79 | 
80 | }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/cnd/project/web.config:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <configuration>
 3 |     <system.webServer>
 4 |         <httpErrors errorMode="Custom">
 5 |             <remove statusCode="404" subStatusCode="-1" />
 6 |             <error statusCode="404" prefixLanguageFilePath="" path="/index.html" responseMode="ExecuteURL" />
 7 |         </httpErrors>
 8 |         <security>
 9 |             <requestFiltering>
10 |                 <fileExtensions>
11 |                     <add fileExtension=".vue" allowed="true" />
12 |                 </fileExtensions>
13 |             </requestFiltering>
14 |         </security>
15 |         <staticContent>
16 |             <mimeMap fileExtension=".vue" mimeType="text/html" />
17 |         </staticContent>
18 |     </system.webServer>
19 | </configuration>
20 | 


--------------------------------------------------------------------------------
/web.config:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <configuration>
3 |     <system.webServer>
4 |         <directoryBrowse enabled="true" />
5 |     </system.webServer>
6 | </configuration>
7 | 


--------------------------------------------------------------------------------