前端实现修改架构图组件 前端组件框架

前端框架基础 vue01

前端开发的变化过程

1、html js css 导入

2、构建工具(编译工具 webpack,vite2) + 新语言（ES6，typescript） + 前端框架(vue,react,agular,flutter…)（数据驱动视图、路由机制）

xxx.vue

3、脚手架 CLI

4、SPA： single page application

5、MPA ： multiple page application

6、模块化 node require Import

.js   css 都会被模块化

二、VUE CLI 使用

• 主流版本 cli2 cli3.x != vue版本

安装

安装完成后，就可以使用vue指令来创建和管理一个脚手架项目

npm i -g  vue-cli    // "2.x"
npm i -g  @vue/cli   // "默认安装的是最新版本(一般不要安装最新版，防止各个插件版本不匹配)"
npm i -g  @vue/cli@4.x //"安装指定版本 安装4.x"
npm uninstall -g vue-cli  //"删除 2.x"
npm uninstall -g @vue/cli //"删除3.x以上"
npm i 模块名@版本号
一般在安装命令行（cli）模块时，我们采用 -g 全局安装，为的是保证安装出来的命令行指令在系统的每个
目录都可以使用，相当于配置了该指令的"环境变量"

创建项目

先在cmd中进入要创建项目目录，然后再执行以下指令 cli3.x+

vue create  项目名
vue ui      项目的可视化管理工具， 类似于 phpmyadmin

Cli2 创建方式

vue init webpack  项目名称

三、项目架构说明

• public 目录
  +. 该目录中，存放的是htmlwebpackPlugin的模版文件 index.html
  + 该目录也是devserver的开发服务根目录
• src. 目录
  项目代码目录：所有的业务代码都写在该目录中

• main.js :webpack打包入口文件，所有代码都从该文件开始执行

import Vue from 'vue';
import App from 'App.vue' ;
//创建了 vue实例
new Vue({
   render : h => h(App) //将App.vue中的结构渲染到#app中
}).$mount('#app')  //该Vue是以模版文件index.html。div#app作为挂载点

• App.vue : 挂载到div#app中的母板，这里面一般只放一个标签

<template>
<div class="app">
	<router-view>  
</div>
</template>

• assets : 静态资源目录（本地所使用一些静态文件 js,css,图片，字体）

• img
• font
• css
• Js

• 剩余的目录都可以根据工程需要，自行创建，但原则上还要按照同一类型用一个文件目录存放
  例如： views目录：存放所有的页面.vue

##### 页面架构

   <img src="1.png">

• .vue文件基本构成
• 页面vue命名规范 大驼峰命名法
• Home.vue

html部分
<template>
   <div>
       必须要有一对div包裹
  </div>
</template>

js部分
<script>
  export default {
      
  }
</script>

css部分
<style scoped> 
    /*样式隔离*/
   //scoped属性添加以后有，编译生成的样式会带有一个随机的hash属性选择器，用于隔离区分不同
   //vue组件中的css选择器
   //编译的效果如下
   .box[data-v-bcc8ec6a] {
    	color: blue;
        background: green;
   }
</style>

• 基本路由配置
  vue+webpack做的是单页面 SPA应用，因此内部页面跳转，本质上是标签容器的切换。这种切换需要利用前端的路由概念来实现，因此我们需要安装一个别人已经写好的路由跳转插件 vue-router

//main.js
import RouterVue from 'router-vue' ; //导入
//挂载到Vue原型
Vue.use(RouterVue);

//创建路由对象
const router = new RouterVue({
    //配置路由表
  routes : [
    {
      path : "/home",
      componet : () => import('@/views/Home.vue')
    },
    {
      path : "/work",
      componet : () => import('@/views/Work.vue')
    }
  ]
})
//注入vue实际例
new Vue({
    router
})

• .editorconfig 文件（编辑配置文件，用于设置编辑器的编写特性）

charset = utf-8    //文件编码格式
style_indent = tab //缩进方式
indent_size  = 2   //缩进大小
//vscode必须安装对应的 .editorconfig插件才能生效以上配置

• .gitignore git提交是忽略文件配置
• babel-config.js babel配置文件
• Vue.config.js

// vue.config.js是webpack配置的一个包装后的配置对象文件
module.exports = {
    lintOnSave : false ,  //关闭eslint检查
    chainWebpack : config=> {
    	//可以通过config来访问配置原始的webpack配置对象
        config
        .resolve
        .alias
        .set('v', path.resolve(__dirame, './src/views'))
    }
}

数据驱动视图

• MustAche语法 模板语法

<template>
    <div>
          {{city}}    北京
          {{city + "ddd"}}  北京dd
          {{city == "北京" ? "111" : "222"}}  111
          {{表达式}}
        
        <div class="box" :data-id="city"></div>  data-id="北京"
    </div>
</template>

<script>
export default {
    data(){
        return {
            city : "北京"
        }
   }
}
</script>

• 写在标签行间外 {{表达式}}

<div>{{表达式}}</div>

• 写在标签行间属性内 :属性名=“表达式”

<div :src="表达式" :data-id="表达式"></div>

• 默认都是渲染的是文本，如果渲染html字符串 v-html=“标签字符串变量”

<div v-html="标签字符串变量"></div>

计算属性（computed）

计算属性常常用在，要被渲染的变量是需要经过复杂的数据处理过程后才显示结果的场景。写在 computed : {},以函数的形式的进行定义。 函数名，就是计算属性名。函数的返回值就是计算属性的值

<template>
   <div>{{con}}</div>  //由于content变量的处理，需要有一个复杂过程（需要多个表达式处理），因此，不能直接给在{{}}中写，此时需要计算属性con
</template>
<script>
    export default{
        data(){
            return {
                content : "你TMD的可以G了"
            }
        },
        computed: {
            con(){
                return this.content.replace(/TMD|G/g,argu=> "*".repeat(argu.length))
            },
            aa : function(){
                  //可以传参的计算后属性
                   return (char)=>{
                      return this.content.replace(/TMD|G/g,argu => char.repeat(argu.length));
                  }
             }
        }
    }
</script>

条件渲染

v-if  v-else  v-else-if

 *根据不同的表达式结果，来显示不同的组件：特点是如果条件为假，组件都不会被创建*

 ```vue
 <template>
        <h1 v-if="num > 90">优秀</h1>      //num = 200  显示优秀
        <h2 v-else-if="num > 80">良好</h2>  //num 80-90 显示良好
        <h2 v-else-if="num > 60">及格</h2>  // num 60-80 显示及格
        <h2 v-else>挂科</h2>                // num < 60 显示挂科
 </template>
 <script>
     export defalut {
         data(){
             return {
                 num : 200
             }
         }
     }
 </script>
 ```

• v-show : 写在组件行间，如果表达式的结果为真，就给该组件设置display:block 如果条件表达式结果为false就给该组件设置display:none

v-show与v-if的区别，v-if条件为假不会创建组件，v-show总会创建组件，因此加载过程v-if要比v-show要快，运行过程，v-if条件变化，需要重新创建DOM，因此执行速度没有v-show快，一般v-if总是用于多显一状态 v-show用于单个盒子显示和隐藏

列表渲染

遍历数组

<template>
           <div  v-for="(item,index) in pds" :key="item.id" class="cell">
               <h1>{{index + 1}}</h1>
               <h2>id:{{item.id}}</h2>
               <h2>书名:{{item.name}}</h2>
               <h2>作者：{{item.author}}</h2>
           </div>
</template>
<script>
     export default{
         data(){
             return {
                 pds     : [
           {
             id : "001",
             name : "三国演义",
             author : "罗贯中"
           },
            {
             id : "002",
             name : "红楼梦",
             author : "曹雪芹"
           },
            {
             id : "003",
             name : "西游记",
             author : "吴承恩"
           },
            {
             id : "004",
             name : "水浒传",
             author : "施耐庵"
           }
        ],
             }
         }
     }
</script>

遍历对象

<template>
        <div v-for="(value,key) in person" :key="key">
         {{key}} ： {{value}}
       </div>
  </template>
  <script>
       export default{
           data(){
               return {
                   person ： {
                        name : "张三",
                        age  : 12
                   }
               }
           }
       }
  </script>

遍历数值

<template>
     <div class="box" v-for="n in 10">{{n}}</div>
</template>