Vue3+vite（1）

k01k01
193 阅读2分钟

1.何为Vue

Vue是一款用于构建用户界面的渐进式框架。相较于其他大型框架，Vue是一种轻量级、可自底向上逐层应用的框架。Vue也是一款用于构建Web前端页面的JavaScript框架。

2.第一个Vue项目实例

2.1搭建开发环境

2.1.1安装Node.js
  • Node.js是一个开源、跨平台的JavaScript运行时环境。它能让JavaScript脱离浏览器直接在服务器端运行。
  • 到nodejs.org下载Node.js，下载成功后运行文件，安装过程中勾选Automatically install the necessary tools.在安装窗口关闭后会自动弹出终端，按任意键两次后会弹出Windows PowerShell，最后出现Type ENTER to exit表示安装成功。此过程较慢并且不易一次成功。

image.png

  • 若没有安装成功，则需要删除nodejs所在的文件夹以及C盘ProgramData中的chocolatey文件夹和ChocolateyHttpCache文件夹后，按上述步骤重新安装一次即可。
2.1.2下载vs code及相关插件
  • 到官网下载vscode。
  • 相关插件有三个，如图所示。

image.png image.png

image.png

  • 下载好后，新建终端，输入指令node -v查看版本，输入npm -v查看版本，若nodejs安装成功就能看到安装的版本。
  • 当输入npm -v命令时如果出现报错，解决方案如下，windows+x选择终端管理员，输入命令 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser，回车，再次打开终端输入命令npm -v就能看到相应的版本了。
  • 报错信息如下 image.png

image.png

2.1.2安装Vue Devtools
  • 在Edge浏览器右上角找到三个点，点开找到扩展，点击扩展找到获取扩展，搜索Vue.js devtools拓展并下载。
  • 在完成Vue Devtools扩展的添加后，之后打开基于Vue开发的网站时，Vue Devtools图标会自动变成彩色的。

2.2第一个Vue 3应用实例

2.2.1创建一个单页面项目
  • 在vs code里打开项目所在的文件夹，在终端里输入命令npm init vue@latest，会自动安装并执行create-vue，用于创建基于Vite的Vue 3的项目。

image.png

  • 出现OK to proceed（y)时 输入y。接着根据提示输入相应内容。
  • 选择router时，上下箭头用来移动，空格键表示选择。

image.png

  • 进入到你的项目中去，输入命令cd（你的项目目录），再输入命令npm install。

image.png

  • 再输入运行命令npm run dev即可。

image.png

2.3新加按钮

  • 在view中新建lifecycledemo.vue文件，修改app.vue和index.js文件相应位置。

image.png

  • lifecycledemo代码如下
<template>
    <div>
        <h1>{{message}}</h1>
    </div>
</template>
    
    <script>
    import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount,onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue';
    
    export default {
        name: 'LifecycleDemo',
        props: {
        msg: String,
    },
    setup(props,context) {
        const message = ref("LifecycleDemo");
        console.log('setup');
        
        onBeforeMount(()=>{
        console.log('before mount');
    });
    
        onMounted(()=>{
        console.log ('mounted');
    });
    
        onBeforeUpdate(()=>{
    console.log('before update');
    });
        onUpdated(()=>{
    console.log('updated');
    });
    onBeforeUnmount(()=>{
    console.log('before unmount');
    });
    onUnmounted(()=>{
    console.log('unmounted');
    });
    onActivated(()=>{
    console.log('activated');
    });
    onDeactivated(()=>{
    console.log('deactivated');
    });
    return{
    message,
    };
    },
    beforeCreate(){
    console.log('before create');
    },
    created(){
    console.log('created');
    },
    beforeMount(){
    console.log('before mount');
    },
    mounted(){
    console.log('mounted');
    },
    beforeUpdate(){
    console.log('before update');
    },
    updated(){
    console.log('updated');
    },
    beforeUnmount(){
    console.log('before unmount');
    },
    unmounted(){
    console.log('unmounted');
    },
    activated(){
    console.log('activated');
    },
    deactivated(){
    console.log('deactivated');
    },
    errorCaptured(err, vm, info){
        console.error('Error captured:', err, vm, info);
    },
    };
    </script>
  • 重新输入运行指令，进入网址就可以看到新增了lifecycledemo模块。

image.png

avatar
文章
阅读
粉丝