vue学习

1.环境搭建

1官网下载

Node.js 官方网站下载:https://nodejs.org/en/download/ 选择64-bin .misi

https://nodejs.org/zh-cn/download/releases/可指定版本

2.配置环境变量

在系统变量path里添加 D:\develop\vue\node18

安装成功测试安装是否成功,运行CMD,分别输入node -vnpm -v 分别查看node和npm的版本号

3.修改配置

配置自定义的全局模块安装目录,在node.js安装目录下新建两个文件夹 node_globalnode_cache

npm get prefix
npm config set prefix "D:\develop\vue\node14\node_global"
npm get cache
npm config set cache "D:\develop\vue\node14\node_cache"

#设置源(设置完成后不安装淘宝镜像)
npm config set registry https://registry.npm.taobao.org/   #淘宝源
npm config set registry https://registry.npmmirror.com/    #清华源
#获取源设置
npm config get registry
#恢复官方源
npm config set registry https://registry.npmjs.org/

#测试模块
npm install express -g

sass_binary_site=https://npm.taobao.org/mirrors/node-sass
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

执行成功后,会生成文件C:\Users\xxx(用户).npmrc

4.安装淘宝镜像

#已修改仓库源后无需安装
#需要用管理员打开终端
npm install -g cnpm --registry=https://registry.npmmirror.com 
#卸载 
npm uninstall cnpm -g
#清空缓存
npm cache clean --force
#查看版本
cnpm -v

5.全局安装vue-cli

cnpm install -g @vue/cli  #安装
npm uninstall @vue/cli -g #卸载
vue -V    #查看全局vue脚手架版本

6.安装yarn

npm install -g yarn 
yarn --version

# 更换源
yarn config get registry
yarn config set registry https://registry.npm.taobao.org/

#恢复官方源
yarn config set registry https://registry.yarnpkg.com --global


# 改变yarn全局安装位置
yarn global dir
yarn config set global-folder "D:\develop\vue\yarn\global"

# 改变yarn 缓存位置
yarn cache dir
yarn config set cache-folder "D:\develop\vue\yarn\cache"

# 改变 yarn bin位置
yarn global bin
yarn config set prefix "D:\develop\vue\yarn"

7.查看配置

#1.可以命令行输入
npm config list
#2.直接查看C:\Users\12735下的.npmrc文件,删除后回归默认配置

8.报错

cnpm install --global windows-build-tools
cnpm install gulp-sass@6.0.1 --save-dev
cnpm install --global node-gyp 

9.卸载node

  • 控制面板卸载nodejs
  • 去C:\Users\对应用门下 删除 .pmrc
  • 删除对应文件夹

2.创建vue项目

1.创建文件夹

先创建一个文件夹作为项目的工作空间,通过cmd命令切换到该文件夹下

2.创建项目

#1.使用全局安装的vue脚手架创建项目
vue create 项目名

#2.使用局部安装的vue脚手架创建项目
npm init -y # 初始化项目依赖文件
cnpm i -D @vue/cli@4.5.15 # 局部安装脚手架
npx vue -V # 查看vue-cli版本号
npx vue create 项目名 # 创建项目
cd 项目名 #进入项目文件夹
yarn serve  #启动项目 npm run serve也可


#3.图形安装
vue ui   #图形化安装,对应vue create 项目名
npx vue ui #图形化局部安装创建项目,对应npx vue create 项目名

3.使用预处理器Scss

官网:[https://www.sass.hk/]

  • 3.1安装
cnpm i sass-loader@7 node-sass@4 -S
  • 3.2使用
<style lang="scss"></style>

4.使用预处理器Less

  • 4.1安装
cnpm i less@3 less-loader@7 -S
  • 4.2 使用
<style lang="less"></style>

5.使用reset.css

任何一个项目都需要做样式重置,这里我们使用官方的样式重置内容,如果需要补充可以自己手动添加。
官网: [https://meyerweb.com/eric/tools/css/reset/]
我们把代码复制下来放在项目中新建的reset.css文件,然后在app.vue的style中进行引入使用:

@import url('./assets/css/reset.css');

6.图标库的使用

font-awesome图标库官网:[https://fontawesome.dashgame.com/]

  • 6.1 安装
cnpm i font-awesome -D
  • 6.2 在main.js中引入
import 'font-awesome/css/font-awesome.min.css'
  • 6.3 使用
<i class='fa fa-users'></i>

7.配置路由

  • 7.1 下载vue-router
cnpm i vue-router@3 -S
  • 7.2 配置路由(新建router文件夹和index.js文件)
// index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home.vue'
 
Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            component: Home
        }
    ],
    mode: 'history'
})
  • 7.3 挂载使用
// main.js
import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
<!-- 在App.vue设置路由出口 -->
<router-view></router-view>
  • 7.4 路由懒加载
//官方推荐的方法,使用ES中的import
component: () => import('@/components/Login')
//使用Vue异步组件
component: resolve => require(['@/components/Home'], resolve)

8.axios的二次封装

  • axios二次封装,在src文件夹下新建service.js,写入封装的内容,然后再在main.js中引入service
import axios from 'axios'
import { getToken } from '@/utils/setToken.js'
import { Message } from 'element-ui'

const service = axios.create({
    baseURL: '/api', // baseURL会自动加在请求地址上
    timeout: 3000
})

// 添加请求拦截器
service.interceptors.request.use((config) => {
    // 在请求之前做些什么(获取并设置token)
    config.headers['token'] = getToken('token')
    return config
}, (error) => {
    return Promise.reject(error)
})

// 添加响应拦截器
service.interceptors.response.use((response) => {
    // 对响应数据做些什么
    let { status, message } = response.data
    if(status !== 200) {
        Message({message: message || 'error', type: 'warning'})
    }
    return response
}, (error) => {
    return Promise.reject(error)
})

export default service
// main.js
import service from './service'
Vue.prototype.service = service // 挂载到原型,可在全局使用

9.跨域的处理

  • 跨域的处理在vue.config.js中设置代理
// vue.config.js
module.exports = {
    devServer: {
        open: true,
        proxy: {
            '/api': {
                target: 'http://localhost:3000/',
                changeOrigin: true, // 允许跨域
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

10.setToken.js

//设置token和获取token以及删除token的方法
export function setToken(tokenKey, token) {
    return localStorage.setItem(tokenKey, token)
}
export function getToken(tokenKey) {
    return localStorage.getItem(tokenKey)
}
export function removeToken(tokenKey) {
    return localStorage.removeItem(tokenKey)
}

11.登录界面

<template>
    <div class="login">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>通用后台管理系统</span>
            </div>
            <el-form label-width="80px" :model="form" ref="form" :rules="rules">
                <el-form-item label="用户名" prop="username" >
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login('form')">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import {nameRule,passRule} from "../utils/vaildate";
    import {setToken} from '@/utils/setToken.js'
    import { login } from '@/api/api.js'
    export default {
        name: "Login",
        data() {
            return {
                form: {
                    username:'',
                    password:''
                },
                rules: {
                    username: [{validator: nameRule,trigger: 'blur'}],
                    password: [{validator: passRule,trigger: 'blur'}]
                }
            }
        },
        methods: {
            login(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        console.log(this.form);
                        /*  把这个登录单独封装成api进行调用
                        this.service.post('/login', this.form)
                         .then((res) => {
                             if (res.data.status === 200) {
                                 setToken('username', res.data.username)
                                 setToken('token', res.data.token)
                                 this.$message({message: res.data.message, type: 'success'})
                                 this.$router.push('/home')
                             }
                         })
                         */
                        login(this.form).then((res) => {
                            if (res.data.status === 200) {
                                setToken('username', res.data.username)
                                setToken('token', res.data.token)
                                this.$message({message: res.data.message, type: 'success'})
                                this.$router.push('/home')
                            }
                        })
                    } else {
                        console.error(this.form);
                    }
                });
            },
        }

    }
</script>

<style lang="scss">
    .login {
        width: 100%;
        height: 100%;
        position: absolute;
        background: aqua;
        .box-card {
            width: 450px;
            margin: 200px auto;
            .el-card_header{
                font-size: 34px;
            }
            .el-button {
                width: 100%;
            }
        }
    }

</style>

12.匹配用户密码

//vaildate,js
//用户名匹配
export function nameRule(rule,value,callback) {
    //请输入4-10位用户名;
    let reg = /(^[a-zA-Z0-9]{4,10}$)/;
    if(value === '') {
        callback(new Error('请输入用户名'))
    }else if (!reg.test(value)){
        callback(new Error('请输入4-10位用户名'))
    }else {
        callback()
    }
}
//密码匹配
export function passRule(rule,value,callback) {
    //6-12位密码包含大小写字母数字以及特殊符号
    let pass = /(^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$)/;
    if(value === '') {
        callback(new Error('请输入密码'))
    }else if (!pass.test(value)){
        callback(new Error('6-12位密码包含大小写字母数字以及特殊符号'))
    }else {
        callback()
    }
}

13.el报错

//.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    "indent": ["off", 2]  //解决error Unexpected trailing comma comma-dangle
  }
}
//vue.config.js
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false //error and 0 warnings potentially fixable with the `--fix` option.
})

3.Element-ui

3.1使用ElementUI

  • 安装element-ui
npm i element-ui -S
  • 在main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3.2label和:label

el-radio-group中的label和:label

  • :label = “1” 数字1
  • :label= “‘1’” 字符串1
  • label = “1” 字符串1

3.3多选框问题

  • selected为禁用方法,控制返回值设置是否禁用
<el-table-column type="selection" 
                 :selecttable="selected"      
 ></el-table-column>
selected(row,index){
	if(row.status == 1){
		return turn;  //可选择
	} else {
		return false;  //不可选择,禁用
 }
}

3.4菜单展开长度变化

.el-menu {
    border-right-width: 0;
}

4.地图

4.1刷新地图

  • 解决标绘多个图标时地图卡顿问题
var dataManager = Mgs.GDataManager;
dataManager.beginUpdate();//开始刷新
//多个图标创建
dataManager.endUpdate()//结束刷新

5.Vue语法

5.1指令

1.内容渲染指令

  • v-text 文本,会覆盖元素内的默认值
  • v-html 文本+标签绑定
  • {{}} 文本绑定,和v-text不会覆盖默认值

2.属性绑定指令

  • ==v-bind:==设置元素的属性值 简写:

3.事件绑定指令

  • v-on: 为元素绑定事件 简写@

  • $event 原生dom的事件对象

    $event.target得到标签对象

    $event.preventDefault 阻止元素发生默认的行为

    @click.prevent 阻止元素发生 默认的行为

    @click.stop 阻止事件冒泡

4.双向绑定指令

  • v-model 双向绑定

    .number 自动将用户输入值转为数值类型

    .trim 自动过滤用户输入的首尾空白字符

    .lazy 中间过程不改变,失焦时改变

5.条件渲染指令

  • v-model 获取和设置表单元素的值(双向数据绑定)

    .number自动将用户的输入值转为数值类型

    .trim自动过滤用户的首尾空白字符

    .lazychang

  • v-show 切换显示或隐藏(操作css的display)

  • v-if 切换显示或隐藏(操作DOM)

    v-if v-else-if v-else

6.列表渲染指令

  • v-for 遍历数据

    <!--只要用到v-for指令,那么一定要绑定一个:key属性,保证有状态的列表被正确更新,不要用index当做key没有意义-->
    <tr v-for="item in list" :key="item.id">
    	<td>{{item.id}}</td>
    </tr>
    <!--index非必选-->
    <tr v-for="(item,index) in list" :key="item.id">
        <td>{{index}</td>
    	<td>{{item.id}}</td>
    </tr>
    

5.2过滤器filter

过滤器常用于文本的格式化用管道符“|”进行调用

vue3没有过滤器

关键词filter

<html lang="en">
<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">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>message 的值是:{{ message | capi }}</p>
  </div>

  <div id="app2">
    <p>message 的值是:{{ message | capi }}</p>
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    // 使用 Vue.filter() 定义全局过滤器
    Vue.filter('capi', function (str) {
      return str + '~~~'
    })

    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello vue.js'
      },
      // 过滤器函数,必须被定义到 filters 节点之下
      // 过滤器本质上是函数
      filters: {
        // 注意:过滤器函数形参中的 val,永远都是“管道符|”前面的那个值
        capi(val) {
          // 强调:过滤器中,一定要有一个返回值
          return val + '~~~'
        }
      }
    })
    
    const vm2 = new Vue({
      el: '#app2',
      data: {
        message: 'heima'
      }
    })
  </script>
</body>

</html>

5.3监听器watch

<template>
  <div>
    <h3>watch 侦听器的用法</h3>
    <input type="text" class="form-control" v-model.trim="info.username" />
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'MyWatch',
  data() {
    return {
      username: 'admin',
      info: {
        username: 'zs',
        age: 20,
      },
    }
  },
  // 所有的侦听器,都应该被定义到 watch 节点下
  watch: {
      //1.侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可
      async username(newVal, oldVal) {
          //axios.get()返回结果位primise对象,前面添加await可直接解构
          //{data: res}得到primise对象的data数据,并重命名为res
          const {data: res} = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
          console.log(res)
      },

     //2.是否初始化自动触发immediate
     username: {//定义对象格式的侦听器
       //handler(newVal, oldVal)固定写法,当username变化时调用
       async handler(newVal, oldVal) {
         const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
         console.log(res)
       },
       immediate: true, //默认false  作用:控制侦听器是否自动触发一次 ,true表示加载完毕后立即调用一次
     },
      
     //3.深度监听deep
     info: {
       async handler(newVal) {
         const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal.username)
         console.log(res)
       },
       deep: true, // 开启深度监听,只要对象中任何一个属性变化了,都会触发“对象的侦听器”
     },
      
    //4.监听对象中单个属性的变化
    'info.username': {
      async handler(newVal) {
        const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
        console.log(res)
      },
    },
      
  },
}
</script>

<style lang="less" scoped></style>

5.4计算属性

计算属性指的是通过一系列运算之后,最后得到一个属性值

这个动态计算出来的属性值可以被模板结构methods方法使用

es6中也可以采用==${XXX}==来在字符串中插入变量(这个记住要利用v-bind)

计算属性 vs 侦听器

计算属性和侦听器侧重的应用场景不同

计算属性侧重于监听多个值的变化,最终计算并返回一个新值

侦听器侧重于监听单个数据的变化,最终执行特定的业务处理,不需要有任何返回值

特点:

  1. 定义的时候,要被定义为“方法”
  2. 在使用计算属性的时候,当普通的属性使用即可

好处:

  1. 实现了代码的复用
  2. 只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!

computed

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.6.12.js"></script>
</head>
    
<body>
  <div id="app">
    <div>
      <span>R:</span>
      <input type="text" v-model.number="r">
    </div>
    <div>
      <span>G:</span>
      <input type="text" v-model.number="g">
    </div>
    <div>
      <span>B:</span>
      <input type="text" v-model.number="b">
    </div>
    <hr>
    <!-- 专门用户呈现颜色的 div 盒子 -->
    <!-- 在属性身上,: 代表  v-bind: 属性绑定 -->
    <!-- :style 代表动态绑定一个样式对象,它的值是一个 {  } 样式对象 -->
    <!-- 当前的样式对象中,只包含 backgroundColor 背景颜色 -->
    <div class="box" :style="{ backgroundColor: rgb }">
      {{ rgb }}
    </div>
    <button @click="show">按钮</button>
  </div>

  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
      },
      methods: {
        // 点击按钮,在终端显示最新的颜色
        show() {
          console.log(this.rgb)
        }
      },
      // 所有的计算属性,都要定义到 computed 节点之下
      // 计算属性在定义的时候,要定义成“方法格式”
      computed: {
        // rgb 作为一个计算属性,被定义成了方法格式,
        // 最终,在这个方法中,要返回一个生成好的 rgb(x,x,x) 的字符串
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
    });

    console.log(vm)
  </script>
</body>

</html>

5.5axios

axios是一个专注于网络请求的库

1 安装

cnpm install axios  //安装axios
import axios from 'axios'
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.全局配置

  • vue2

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • vue3

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. request.js(推荐)

//1.request.js内容
import axios from 'axios'

// 调用 axios.create() 函数,创建一个 axios 的实例对象,用 request 来接收
const request = axios.create({
  // 指定请求的根路径
  baseURL: 'https://www.escook.cn'
})

export default request


//2.调用request.js
import request from '@/utils/request.js' 
const {data: res} =  await request.get('/find'{
            	params:{
            		page:this.page,
            		limit:this.limit
            	}
            });

2.基本使用

发起 GET 请求:

axios({
  method: 'GET',
  url: 'http://www.liulongbin.top:3006/api/getbooks',
  contentType: "application/json",//使数据传递变为json格式(选填)
  // URL 中的查询参数
  params: {
    id: 1
  }
}).then(function (result) {
  console.log(result)
})
axios.get("地址"?key=vaule&key2=value2).then(function(response){}).catch(function(error){})
axios.get('地址',{params:{ID: 12345}}).then(function(response){}).catch(function (error){})

发起 POST 请求:

document.querySelector('#btnPost').addEventListener('click', async function () {
  // 如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await!
  // await 只能用在被 async “修饰”的方法中
  //{ data: res }解构赋值,使用:重命名为res
  const { data: res } = await axios({
    method: 'POST', 
    url: 'http://www.liulongbin.top:3006/api/post',
    //请求体参数
    data: {
      name: 'zs',
      age: 20
    }
  })
  console.log(res)
})
axios.post('/user',{firstName:'Fred',lastName:'Flintstone'}).then(function(response){})             

5.6生命周期

  • Vue2

组件创建阶段–>组件运行阶段–>组件销毁阶段

组件创建阶段:breoreCreate–>created(ajax请求一般用这个)–>beforeMount–>mounted

组件运行阶段:beforeUpdate–>updated

组件销毁阶段:berforDestory–>destroyed

  • Vue3

如何监听组件的更新

当组件的 data 数据更新之后,vue 会自动重新渲染组件的 DOM 结构,从而保证 View 视图展示的数据和Model 数据源保持一致。

当组件被重新渲染完毕之后,会自动调用updated生命周期函数。

brforeCreate前有setup(Composition API)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.7数据共享

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.父向子

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • props是自定义属性,允许使用者通过自定义属性,为当前组件指定初始值,组件的使用者可以通过props把数据传递到子组件内部,供子组件内部进行使用

    props:['init'],
    
  • props是只读的

  • props的default默认值props要改为对象形式

    props:{
        init:{
            //用default属性定义属性的默认值
            default:0//用type属性定义属性的值类型
            type:Number,
            //必填项校验
            required:true
        }
    }
    

2.子向父

  1. 子组件中声明自定义事件,emits: [‘numchange’], 和methods并列 (不写应该也行)

  2. 子组件中触发this.$emit(‘numchange’,this.ouunt)

  3. 父组件监听<Son @numchange=“getSonCount”>

    methods:{
        getSonCount(val){
            this.sonCount = val;//val就是子组件通过自定义传过来的值
        }
    }
    

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.兄弟组件

必须保证 $on()监听事件先被创建,否则无法正常监听消息

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 新兄弟组件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.父子孙

必须嵌套才能使用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.8ref引用

  1. 定义

    ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。

    每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。默认情况下,

    组件的 $refs 指向一个空对象。

  2. 获取文本框焦点

    //this.$nextTick(cd),把cd回调推迟到下一个DOM更新周期之后执行。就是等组件的DOM更新完成之后,再执行cd回调函数
    this.$nextTick(()=>{
    	this.$refs.名字.focus();
    })
    
    

5.9插槽

==插槽(Slot)==是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的

部分定义为插槽。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.10自定义指令

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.11 其他

5.12.1获得绝对路径

const path = require('path')
const themePath = path.join(__dirname,'./src/theme.less')//绝对路径

//使用
hack:'true;@import "${themePath}"'

5.12.2配置打包

//vue.config.js
module.exports = {
    publicPath: './',//打包后可直接双击打开
}

5.12.3样式冲突

scoped让样式只适用用当前vue
<style lang="less" scoped>
    //使用/deep/改变内部样式,可以用来修改组件库的样式
    /deep/ h5{
        color:pink;
    }    
</style>

5.12.4动态组件

动态组件指的是动态切换组件的显示与隐藏。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

7.1.工作方式

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

7.2.路由实例

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

7.3.补充

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

8.其他

8.1 VScode

1.常用插件

  • Vetur vue文件的语法高亮显示
  • Vue 3 Snippets 自动生成vue的一些代码片段
  • ESLint 统一JavaScript代码风格的工具
  • Chinese(Simplified) 中文
  • Autocomplete 配置@
  • Live Server 实时服务器实时查看开发的网页或项目效果
  • Auto Close Tag 自动闭合标签

2.配置

插件名:Path Autocomplete

//左下角小齿轮->设置->文本编辑器->Code Actions On Save->在settings.json中编辑
//导入文件时是否携带文件的扩展名
"path-autocomplete.extensionOnImport": true,
//配置@路径提示
"path-autocomplete.pathMappings": {
    "@":"${folder}/src"
},

8.2 devtools工具

谷歌扩展程序 ,带bate的是vue3,不带是vue2

10正则表达式

11.ESlint

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

12.文件操作

12.1.触发文件选择框

//普通js  'myfile'是input的id
document.getElementById('myfile').click();
使用input标签创建一个type类型为file的文件选择框,同时给input标签添加一个id属性。

2、在js中,通过id获得input对象,使用click()方法让文件选择框自动点击,弹出file文件框。
npm install vanta@0.5.24
npm install three@0.121.0

13.其他操作

1.全屏

安装Vue Fullscreen库

npm install vue-fullscreen
<template>
  <div>
    <button v-fullscreen @click="toggleFullscreen">切换全屏</button>
    <!-- 内容 -->
  </div>
</template>

<script>
import { fullscreen } from 'vue-fullscreen';

export default {
  directives: {
    fullscreen
  },
  methods: {
    toggleFullscreen() {
      if (this.$fullscreen.isActive) {
        this.$fullscreen.exit();
      } else {
        this.$fullscreen.request();
      }
    }
  }
};
</script>

ose Tag 自动闭合标签

2.配置

插件名:Path Autocomplete

//左下角小齿轮->设置->文本编辑器->Code Actions On Save->在settings.json中编辑
//导入文件时是否携带文件的扩展名
"path-autocomplete.extensionOnImport": true,
//配置@路径提示
"path-autocomplete.pathMappings": {
    "@":"${folder}/src"
},

8.2 devtools工具

谷歌扩展程序 ,带bate的是vue3,不带是vue2

10正则表达式

11.ESlint

[外链图片转存中…(img-eTDhlZGk-1697424624992)]

12.文件操作

12.1.触发文件选择框

//普通js  'myfile'是input的id
document.getElementById('myfile').click();
使用input标签创建一个type类型为file的文件选择框,同时给input标签添加一个id属性。

2、在js中,通过id获得input对象,使用click()方法让文件选择框自动点击,弹出file文件框。
npm install vanta@0.5.24
npm install three@0.121.0

13.其他操作

1.全屏

安装Vue Fullscreen库

npm install vue-fullscreen
<template>
  <div>
    <button v-fullscreen @click="toggleFullscreen">切换全屏</button>
    <!-- 内容 -->
  </div>
</template>

<script>
import { fullscreen } from 'vue-fullscreen';

export default {
  directives: {
    fullscreen
  },
  methods: {
    toggleFullscreen() {
      if (this.$fullscreen.isActive) {
        this.$fullscreen.exit();
      } else {
        this.$fullscreen.request();
      }
    }
  }
};
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值