提交项目

hello_world/.browserslistrc

@@ -0,0 +1,3 @@
+> 1% #代表着全球超过1%人使用的浏览器
+last 2 versions #表示所有浏览器兼容到最后两个版本
+not dead        #24个月没有官方支持或更新的浏览器。目前它是IE 11，IE_Mob 11，黑莓10，黑莓7，三星4，OperaMobile 12.1和百度的所有版本。

hello_world/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,//限定配置文件的使用范围
+  env: { //指定了环境
+    node: true
+  },
+  'extends': [ //指定eslint规范
+    'plugin:vue/essential',//
+    'eslint:recommended'//启用推荐的规则（https://eslint.bootcss.com/docs/rules/）
+  ],
+  parserOptions: { //设置解析器选项
+    parser: '@babel/eslint-parser' //该 parser 允许你使用 ESLint 校验所有 babel code。
+  },
+  rules: { //启用额外的规则或覆盖默认的规则
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}

hello_world/.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?

hello_world/README.md

@@ -0,0 +1,24 @@
+# hello_world
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

hello_world/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

hello_world/directoryList.md

@@ -0,0 +1,21 @@
+|-- HELLO_WORLD                          项目名称
+    |-- node_modules                     依赖文件
+    |-- public                           静态资源  
+    |   |-- favicon.ico                  页面tab图标
+    |   |-- index.html                   挂载的页面
+    |-- src                              主要开发的源码
+        |-- App.vue                      根组件   
+        |-- main.js                      整个项目的入口,引入依赖包、默认页面样式等
+        |-- assets                       资源文件
+        |   |-- logo.png
+        |-- components                   公共组件
+            |-- HelloWorld.vue
+    |-- .browserslistrc                  浏览器约定(可写到package.json中去)
+    |-- .eslintrc.js                     eslint配置(可写到package.json中去)
+    |-- .gitignore                       提交忽略文件配置
+    |-- babel.config.js                  babel配置文件(使es6+向后兼容适配浏览器的js环境)        
+    |-- jsconfig.json                    
+    |-- package-lock.json                版本锁定文件
+    |-- package.json                     版本信息
+    |-- README.md           
+    |-- vue.config.js                    webpack相关配置(vue)

hello_world/jsconfig.json

@@ -0,0 +1,23 @@
+/* 主要作用是vscode导入使用别名时可以自动化提示文件路径 */
+{
+  "compilerOptions": {
+    "target": "es5",//指定要使用的默认库(lib.d.ts)。值为 "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext".
+    "module": "esnext",//在生成模块代码时指定模块系统。值为“ amd”、“ commonJS”、“ es2015”、“ es6”、“ esnext”、“ none”、“ system”、“ umd”
+    "baseUrl": "./", //解析非相关模块名称的基础目录
+    "moduleResolution": "node", //指定如何解析导入模块。值为“node”和“classic”
+    "paths": { //@出现提示路径
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [//含默认的库文件
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ],
+  },
+  "include": [//提示的文件包含区域
+    "src"
+ ]
+}

hello_world/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "hello_world",
+  "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"
+  },
+  "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-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "vue-router": "^4.1.5",
+    "vue-template-compiler": "^2.6.14"
+  }
+}

hello_world/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>

hello_world/src/App.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="app">
+    <div>
+      <button style="margin-right:10px" v-for="item in btnList" @click="choseComponent(item)" :key="item.id">{{item.name}}</button>
+    </div>
+    <h3>{{title}}</h3>
+    <div class="box">
+      <LifeHook v-if="title=='生命周期'"></LifeHook>
+      <EmptBox v-if="title=='新建组件'"></EmptBox>
+      <DataTestVue v-if="title=='绑定数据'"></DataTestVue>
+      <get-value v-if="title=='取值'"></get-value>
+      <Parent v-if="title=='父子传值'"></Parent>
+
+      <div v-if='title=="App"'>
+        <h1>无组件显示</h1>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import LifeHook from './components/LifeHook.vue'//生命周期
+import EmptBox from './components/EmptBox.vue'////新建组件
+import GetValue from './components/GetValue.vue'//取值
+import DataTestVue from './components/DataTest.vue'//绑定数据
+import Parent from './components/Parent.vue'//父子传值
+export default {
+  name: 'App',
+  components: {
+    DataTestVue,
+    EmptBox,
+    GetValue,
+    Parent,
+    LifeHook
+  },
+  data(){
+    return{
+      title:'App',
+      btnList:[
+        {id:1,name:'生命周期'},
+        {id:2,name:'新建组件'},
+        {id:3,name:'绑定数据'},
+        {id:4,name:'取值'},
+        {id:5,name:'父子传值'},
+      ],
+    }
+    },
+    methods:{
+      choseComponent(router){
+        this.title = router.name
+      }
+    }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  /* margin-top: 60px; */
+}
+.box{
+  border: 1px solid #eee;
+  background: #ddd;
+}
+</style>

hello_world/src/components/Child.vue

@@ -0,0 +1,28 @@
+<template>
+    <div style="background:red;">
+        <h2 @click="hanldTitle" style="cursor:pointer;color: #fff;">点击子组件修改数据：{{title}}</h2>
+    </div>
+</template>
+
+<script>
+export default {
+    name:'child',
+    props:{
+        title:{
+            type:String,
+        }
+    },
+    data(){
+        return{}
+    },
+    methods:{
+        hanldTitle(){
+            this.$emit('updateTiTle','这是子组件修改的数据')
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

hello_world/src/components/DataTest.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1>显示的是data中input的数据:{{input}}</h1>
+    <input v-bind:value="input"  @input="change" />
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            input:'这是data中定义的数据'
+        }
+    },
+    methods:{
+        change(e){
+            this.input = e.target.value
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

hello_world/src/components/EmptBox.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    这是一个新建的空白组件
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

hello_world/src/components/GetValue.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h1>{{title}}</h1>
+    <input ref="input" v-model="input" type="text">
+    <button @click="getVaule">获取值</button>
+    <div class="tip">请F12打开console控制查看结果</div>
+  </div>
+</template>
+
+<script>
+
+export default {
+    name:'GetValue',
+    data(){
+        return{
+            title:'这是GetValue组件',
+            input:'绑定的值',
+        }
+    },
+    methods:{
+        getVaule(){
+            console.log('这是ref获取的值：'+this.$refs.input.value)
+            console.log('通过this去定义好的值：'+this.input)
+        }
+    }
+}
+</script>
+
+<style>
+.tip{
+    background: red;
+    color: #fff;
+    margin-top: 10px;
+}
+</style>

hello_world/src/components/LifeHook.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <h1>{{title}}</h1>
+        <div class="tip">请F12打开console控制查看结果</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name:'LifeHook',
+    beforeCreate(){
+           console.log('这是初始化空的vue')
+           console.log(this.title)
+           console.log(document.querySelector('#img-test'))
+       },
+       Created(){
+           console.loh('初始化data,method等方法')
+           console.log(this.title)
+           console.log(document.querySelector('#img-test'))
+       },
+       beforeMount(){
+           console.log('页面模板数据已经组装完成，尚未挂载到元素上')
+           console.log(this.title)
+           console.log(document.querySelector('#img-test'))
+       },
+       mounted(){
+           console.log('页面模板已经挂载完成，可以使用dom元素了')
+           console.log(this.title)
+           console.log(document.querySelector('#img-test'))
+       },
+       data(){
+           return{
+            title:'life'
+           }
+       },
+       method:{
+       }
+}
+</script>
+
+<style>
+.tip{
+    background: red;
+    color: #fff;
+    margin-top: 10px;
+}
+</style>

hello_world/src/components/Parent.vue

@@ -0,0 +1,27 @@
+<template>
+    <div style="background:gold;margin: 20px;">
+        <div style="cursor:pointer" @click="title='这是父组件传递过去的'">点击重置父组件title:{{title}}</div>
+        <Child :title="title" @updateTiTle="updateTiTle"></Child>
+    </div>
+</template>
+
+<script>
+import Child from './Child.vue';
+export default {
+    name:'Parent',
+    components:{
+        Child
+    },
+    data(){
+        return{
+            title:'这是父组件传递过去的'
+        }
+    },
+    methods:{
+        updateTiTle(title){
+            this.title = title
+        }
+    }
+
+}
+</script>

hello_world/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App), //箭头函数es6 render:function(h){return h(c)}
+}).$mount('#app')

hello_world/vue.config.js

@@ -0,0 +1,14 @@
+const { defineConfig } = require('@vue/cli-service')
+const { config } = require('process')
+module.exports = defineConfig({
+  transpileDependencies: true, //自动判断node_modules有需要es6=>es5转换内容
+  // publicPath:'/xxx',
+  lintOnSave:false,
+  devServer:{
+    port: 3000,
+    open:true
+  },
+  chainWebpack:config =>{
+    config.plugin('friendly-errors').use
+  }
+})