提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

重温vue3脚手架之从创建到初始setup

Vue3 创建 初始 脚手架 setup 重温
2023-06-13 09:13:11 时间

目录

vue脚手架创建文件及注意事项

一、注意：用脚手架创建vue3的文件夹时需要脚手架版本在4.5.0版本以上才支持

二、查看脚手架的版本：vue -V

三、如果脚手架的版本过低，可以执行：npm install -g @vue/cli（重新安装脚手架最新版本）

四、使用脚手架创建vue3文件夹，在桌面上建一个：进入cmd，输入cd Desktop进入桌面，输入vue create （创建的文件名称），回车后先选择vue3

五、关闭语法检查：在vue.config.js中写入：

六、vue3里的template中可以不写跟标签

setup

1.理解：vue3中的一个新的配置项，值为一个函数。

2.里面可以写的东西：

·赋值变量：

·方法函数：

注意：如果在字符串中插入变量名时要用${}方法，且字符串用``包裹

3.一定要在setup中写返回的东西

·返回对象（常用）

注意：在setup(){}写的返回值时迎合中的{{name}}插值用的，如果不写页面中渲染不出来

vue脚手架创建文件及注意事项

一、注意：用脚手架创建vue3的文件夹时需要脚手架版本在4.5.0版本以上才支持

二、查看脚手架的版本：vue -V

三、如果脚手架的版本过低，可以执行：npm install -g @vue/cli（重新安装脚手架最新版本）

四、使用脚手架创建vue3文件夹，在桌面上建一个：进入cmd，输入cd Desktop进入桌面，输入vue create （创建的文件名称），回车后先选择vue3

五、关闭语法检查：在vue.config.js中写入：

const { defineConfig } = require('@vue/cli-service')
                module.exports = defineConfig({
                transpileDependencies: true,
                lintOnSave:false
                })

六、vue3里的template中可以不写跟标签

setup

1.理解：vue3中的一个新的配置项，值为一个函数。

2.里面可以写的东西：

·赋值变量：

                  let name = 'lqj';
                  let age = 20;

·方法函数：

                  function sayhello(){
                    alert(`我叫${name},我${age}岁了,你好啊`)
                    }

注意：如果在字符串中插入变量名时要用${}方法，且字符串用``包裹

3.一定要在setup中写返回的东西

·返回对象（常用）

                  return{
                    name,
                    age,
                    sayhello
                    }

注意：在setup(){}写的返回值时迎合<template>中的{{name}}插值用的，如果不写页面中渲染不出来

·返回一个函数（渲染函数）

                    import {h} from 'vue'
                    export default {
                        name:'App',
                        setup(){
                            return ()=> h('h1','lqj')
                        }
                    }

展示：

显示返回对象：

template：

<template>
  <h1>用户信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="sayhello">说话</button>
</template>

script：

<script>

  import {h} from 'vue'
  export default {
    name: 'App',
    // 此处只是测试setup暂时不考虑响应式的问题。
    setup(){
      // 数据
      let name = 'lqj';
      let age = 20;

      // 方法
      function sayhello(){
        alert(`我叫${name},我${age}岁了,你好啊`)
      }
      // 返回一个对象（常用）
      return{
        name,
        age,
        sayhello
      }
    }
  }
</script>

 显示返回函数（渲染函数）：

template：

<template>

</template>

script：

<script>

  import {h} from 'vue'
  export default {
    name: 'App',
    // 此处只是测试setup暂时不考虑响应式的问题。
    setup(){
      // 返回一个函数（渲染函数）
      return ()=> h('h1','lqj')
    }
  }
</script>

 ONEPIECE是真是存在的！

相关文章