преди 15 часа · 7fbc8866f7
--- a/10_vuecli/helloworld/.gitignore
+++ b/10_vuecli/helloworld/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/10_vuecli/helloworld/README.md
+++ b/10_vuecli/helloworld/README.md
@@ -0,0 +1,24 @@
 
				+# helloworld
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+yarn install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+yarn serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+yarn build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+yarn lint
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/10_vuecli/helloworld/babel.config.js
+++ b/10_vuecli/helloworld/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/10_vuecli/helloworld/jsconfig.json
+++ b/10_vuecli/helloworld/jsconfig.json
@@ -0,0 +1,19 @@
 
				+{
			
 
				+  "compilerOptions": {
			
 
				+    "target": "es5",
			
 
				+    "module": "esnext",
			
 
				+    "baseUrl": "./",
			
 
				+    "moduleResolution": "node",
			
 
				+    "paths": {
			
 
				+      "@/*": [
			
 
				+        "src/*"
			
 
				+      ]
			
 
				+    },
			
 
				+    "lib": [
			
 
				+      "esnext",
			
 
				+      "dom",
			
 
				+      "dom.iterable",
			
 
				+      "scripthost"
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
--- a/10_vuecli/helloworld/package.json
+++ b/10_vuecli/helloworld/package.json
@@ -0,0 +1,45 @@
 
				+{
			
 
				+  "name": "helloworld",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "core-js": "^3.8.3",
			
 
				+    "vue": "^2.6.14",
			
 
				+    "vue-router": "^3.5.1"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@babel/core": "^7.12.16",
			
 
				+    "@babel/eslint-parser": "^7.12.16",
			
 
				+    "@vue/cli-plugin-babel": "~5.0.0",
			
 
				+    "@vue/cli-plugin-eslint": "~5.0.0",
			
 
				+    "@vue/cli-plugin-router": "~5.0.0",
			
 
				+    "@vue/cli-service": "~5.0.0",
			
 
				+    "eslint": "^7.32.0",
			
 
				+    "eslint-plugin-vue": "^8.0.3",
			
 
				+    "vue-template-compiler": "^2.6.14"
			
 
				+  },
			
 
				+  "eslintConfig": {
			
 
				+    "root": true,
			
 
				+    "env": {
			
 
				+      "node": true
			
 
				+    },
			
 
				+    "extends": [
			
 
				+      "plugin:vue/essential",
			
 
				+      "eslint:recommended"
			
 
				+    ],
			
 
				+    "parserOptions": {
			
 
				+      "parser": "@babel/eslint-parser"
			
 
				+    },
			
 
				+    "rules": {}
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not dead"
			
 
				+  ]
			
 
				+}
			
--- a/10_vuecli/helloworld/public/favicon.ico
+++ b/10_vuecli/helloworld/public/favicon.ico
--- a/10_vuecli/helloworld/public/index.html
+++ b/10_vuecli/helloworld/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/10_vuecli/helloworld/src/App.vue
+++ b/10_vuecli/helloworld/src/App.vue
@@ -0,0 +1,62 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <div class="container">
			
 
				+      <nav>
			
 
				+        <!-- router-link 就是路由链接 -->
			
 
				+        <!--  to 属性 就是路由链接的路径 -->
			
 
				+        <router-link to="/">
			
 
				+          <div class="nav-item">首页</div>
			
 
				+        </router-link>
			
 
				+        <router-link to="/about">
			
 
				+          <div class="nav-item">关于</div>
			
 
				+        </router-link>
			
 
				+        <router-link to="/pageone">
			
 
				+          <div class="nav-item">页面一</div>
			
 
				+        </router-link>
			
 
				+         <router-link to="/pagetwo">
			
 
				+          <div class="nav-item">页面二</div>
			
 
				+        </router-link>
			
 
				+      </nav>
			
 
				+      <!-- router-view 就是路由出口 -->
			
 
				+       <div class="content">
			
 
				+        <router-view />
			
 
				+       </div>
			
 
				+    </div>
			
 
				+
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<style>
			
 
				+#app {
			
 
				+  font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+  text-align: center;
			
 
				+  color: #2c3e50;
			
 
				+
			
 
				+}
			
 
				+.container{
			
 
				+  display: flex;
			
 
				+}
			
 
				+nav {
			
 
				+  padding: 30px;
			
 
				+  width: 200px;
			
 
				+}
			
 
				+.content{
			
 
				+  flex-grow: 1;
			
 
				+}
			
 
				+.nav-item {
			
 
				+  width: 100px;
			
 
				+  height: 50px;
			
 
				+  background-color: #ddd;
			
 
				+  text-align: center;
			
 
				+  line-height: 50px;
			
 
				+  font-weight: bold;
			
 
				+  color: #111;
			
 
				+  margin-bottom: 10px;
			
 
				+}
			
 
				+
			
 
				+nav a.router-link-exact-active {
			
 
				+  color: #42b983;
			
 
				+}
			
 
				+</style>
			
--- a/10_vuecli/helloworld/src/assets/logo.png
+++ b/10_vuecli/helloworld/src/assets/logo.png
--- a/10_vuecli/helloworld/src/components/HelloWorld.vue
+++ b/10_vuecli/helloworld/src/components/HelloWorld.vue
@@ -0,0 +1,58 @@
 
				+<template>
			
 
				+  <div class="hello">
			
 
				+    <h1>{{ msg }}</h1>
			
 
				+    <p>
			
 
				+      For a guide and recipes on how to configure / customize this project,<br>
			
 
				+      check out the
			
 
				+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
			
 
				+    </p>
			
 
				+    <h3>Installed CLI Plugins</h3>
			
 
				+    <ul>
			
 
				+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
			
 
				+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
			
 
				+    </ul>
			
 
				+    <h3>Essential Links</h3>
			
 
				+    <ul>
			
 
				+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
			
 
				+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
			
 
				+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
			
 
				+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
			
 
				+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
			
 
				+    </ul>
			
 
				+    <h3>Ecosystem</h3>
			
 
				+    <ul>
			
 
				+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
			
 
				+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
			
 
				+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
			
 
				+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
			
 
				+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'HelloWorld',
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped>
			
 
				+h3 {
			
 
				+  margin: 40px 0 0;
			
 
				+}
			
 
				+ul {
			
 
				+  list-style-type: none;
			
 
				+  padding: 0;
			
 
				+}
			
 
				+li {
			
 
				+  display: inline-block;
			
 
				+  margin: 0 10px;
			
 
				+}
			
 
				+a {
			
 
				+  color: #42b983;
			
 
				+}
			
 
				+</style>
			
--- a/10_vuecli/helloworld/src/main.js
+++ b/10_vuecli/helloworld/src/main.js
@@ -0,0 +1,10 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+
			
 
				+Vue.config.productionTip = false
			
 
				+
			
 
				+new Vue({
			
 
				+  router,
			
 
				+  render: h => h(App)
			
 
				+}).$mount('#app')
			
--- a/10_vuecli/helloworld/src/router/index.js
+++ b/10_vuecli/helloworld/src/router/index.js
@@ -0,0 +1,42 @@
 
				+import Vue from 'vue'
			
 
				+import VueRouter from 'vue-router'
			
 
				+// 预加载模式 所有的路由都提前加载好
			
 
				+// 一般首页 会使用预加载模式
			
 
				+import HomeView from '../views/HomeView.vue'
			
 
				+
			
 
				+Vue.use(VueRouter)
			
 
				+
			
 
				+// 配置路由 数组 里面包含所有的页面
			
 
				+// 里面每一个对象 就是一个页面
			
 
				+const routes = [
			
 
				+  {
			
 
				+    // path 就是路由的路径 切换页面的时候 要写的路径
			
 
				+    path: '/',
			
 
				+    // name 就是路由（页面）的名称 
			
 
				+    name: 'home',
			
 
				+    // component 就是对应路由（页面）的组件 （.vue文件）
			
 
				+    component: HomeView
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/about',
			
 
				+    name: 'about',
			
 
				+    // 懒加载模式 访问到这个路由的时候 才加载对应的组件
			
 
				+    // 一般除了首页其他页面 会使用懒加载模式
			
 
				+    component: () => import('../views/AboutView.vue')
			
 
				+  },
			
 
				+  {
			
 
				+    path:"/pageone",
			
 
				+    name:"pageone",
			
 
				+    component: () => import("../views/PageOne.vue")
			
 
				+  },{
			
 
				+    path:"/pagetwo",
			
 
				+    name:"pagetwo",
			
 
				+    component: () => import("../views/PageTwo.vue")
			
 
				+  }
			
 
				+]
			
 
				+
			
 
				+const router = new VueRouter({
			
 
				+  routes
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/10_vuecli/helloworld/src/views/AboutView.vue
+++ b/10_vuecli/helloworld/src/views/AboutView.vue
@@ -0,0 +1,5 @@
 
				+<template>
			
 
				+  <div class="about">
			
 
				+    <h1>This is an about page</h1>
			
 
				+  </div>
			
 
				+</template>
			
--- a/10_vuecli/helloworld/src/views/HomeView.vue
+++ b/10_vuecli/helloworld/src/views/HomeView.vue
@@ -0,0 +1,18 @@
 
				+<template>
			
 
				+  <div class="home">
			
 
				+    <img alt="Vue logo" src="../assets/logo.png">
			
 
				+    <HelloWorld msg="Welcome to Your Vue.js App"/>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// @ is an alias to /src
			
 
				+import HelloWorld from '@/components/HelloWorld.vue'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'HomeView',
			
 
				+  components: {
			
 
				+    HelloWorld
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
--- a/10_vuecli/helloworld/src/views/PageOne.vue
+++ b/10_vuecli/helloworld/src/views/PageOne.vue
@@ -0,0 +1,10 @@
 
				+<template>
			
 
				+    <!-- 组件内部有且只能有一个根元素 -->
			
 
				+    <div>
			
 
				+        <h1>我是页面一</h1>
			
 
				+        <!-- 创建页面步骤 -->
			
 
				+         <!-- 1. 在 src/views 目录下创建 .vue 文件 页面文件 -->
			
 
				+         <!-- 2. 在 src/router/index.js 中配置路由 -->
			
 
				+         <!-- 3. 在 相应的页面 中添加路由链接 -->
			
 
				+    </div>
			
 
				+</template>
			
--- a/10_vuecli/helloworld/src/views/PageTwo.vue
+++ b/10_vuecli/helloworld/src/views/PageTwo.vue
@@ -0,0 +1,32 @@
 
				+<template>
			
 
				+    <div class="container">
			
 
				+        <h1>我是页面二</h1>
			
 
				+        <h1>{{num}}</h1>
			
 
				+        <button @click="addNum">增加</button>
			
 
				+    </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+// export default 导出当前组件的实例对象 必须写 否则路文件中由找不到当前组件
			
 
				+export default {
			
 
				+    // 组件的名称 
			
 
				+    name:"PageTwo",
			
 
				+    // 组件的状态数据 必须是一个函数 返回一个对象
			
 
				+    data(){
			
 
				+        return{
			
 
				+            num:10
			
 
				+        }
			
 
				+    },
			
 
				+    // 组件的方法
			
 
				+    methods:{
			
 
				+        addNum(){
			
 
				+            this.num++;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+</script>
			
 
				+<!-- scoped 表示当前样式只作用于当前组件 设置样式的作用域 -->
			
 
				+<style scoped>
			
 
				+  .container{
			
 
				+    display: block;
			
 
				+  }
			
 
				+</style>
			
--- a/10_vuecli/helloworld/vue.config.js
+++ b/10_vuecli/helloworld/vue.config.js
@@ -0,0 +1,4 @@
 
				+const { defineConfig } = require('@vue/cli-service')
			
 
				+module.exports = defineConfig({
			
 
				+  transpileDependencies: true
			
 
				+})
			
--- a/9_vue/17_vue组件is.html
+++ b/9_vue/17_vue组件is.html
@@ -8,6 +8,7 @@
 
				 <body>
			
 
				     <div id="app">
			
 
				         <div>
			
 
				+            <!-- 组件is指令可以动态切换组件 -->
			
 
				             <div is="box2"></div>
			
 
				             <!-- <box1></box1>
			
 
				             <box2></box2> -->
			
--- a/9_vue/19_bootrap.html
+++ b/9_vue/19_bootrap.html
@@ -55,7 +55,7 @@
 
				 <button type="button" class="btn btn-dark">Dark</button>
			
 
				 
			
 
				 <button type="button" class="btn btn-link">Link</button>    
			
 
				-<input type="checkbox" checked="false">
			
 
				+<!-- <input type="checkbox" checked="false"> -->
			
 
				 </div>
			
 
				 
			
 
				 <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>