前端培训丁鹿学堂：使用vite快速创建vue项目

vite是vue的作者构建的打包工具。

下一代前端开发与构建工具,它有极速的服务启动，和vue搭配开发更方便。

安装vite

前提是你电脑里已经装了node，这是前端人的标配了。

npm init vite@latest

然后按照提示操作即可！

使用vite创建一个vue项目

npm init vite@latest my-vue-app -- --template vue

进入创建的项目，安装依赖即可，非常的快

npm install

然后运行，即可预览一个vue的项目。

npm run dev

实际开发中我们就是这样，所有的内容都在前端里面写，而不需要后端处理了。这就是前后端分离开发。

这样我们就可以进行组件化开发了。

一个页面可以是一个或多个组件，组件就是以.vue结尾的文件，一个组件包含了三个部分，html结构，数据与逻辑，css样式。

script里面就是业务逻辑

template里面就是html结构

style 里面就是css样式。

<script>
export default {
  data(){
    return {
      title:'hello vue'
    }
  }
}
</script>


<template>
<div>
   {{title}}
</div>
</template>


<style>


</style>