Vue环境搭建

简介: Vue环境搭建

一、前言


最近事情不多,准备花一周时间看看Vue的资料,也用Vue做一些小玩意。

这里浏览了一些相关资料打算直接使用Vite来构建自己的vue项目。

vite是什么?


vite是尤雨溪团队开发的新一代的前端构建工具,意图取代webpack,它的优点官网也有一些介绍:

349c0c6ba3204c29b47170440bcf862e.png

二、环境搭建


1)使用vite创建项目


使用vite能很方便的创建一个项目,执行下图命令之一即可:


cb749240b8de4b788329e74f39dd4230.png


这里为使用的是yarn,所以执行的是yarn create vite 命令,执行后安装提示设置项目配置即可。

创建完成后,进入项目目录执行命令yarn 安装依赖包,然后使用yarn dev 启动项目:

58ec4a7cac8d4ddb84bbf8252e41807f.png


启动成功后访问:http://localhost:5173/,看到下图即代表成功:

b1910c9c487b484f9d0335c990de894a.png

2)安装Element+


Element+(Element Plus)是一款热门不错的UI组件库,后面在我开发界面的时候离不开它。

执行安装命令:


yarn add element-plus


修改项目的src/main.ts文件为下面的代码:


import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')


然后添加一个element组件库的按钮到main.vue中,完整代码如下:


<template>
  <div>
    <el-button type="primary">Primary</el-button>
  </div>
</template>


这时刷新网页可以看到如下界面:


cb6aa00f23714af99bf9598e27328b6c.png


再使用Element的Table模板代码:


<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>


页面效果

70def377798a4098a627fb21d65580fe.png


三、总结


Vue好像也有类似umi这样的应用框架叫做nuxt,这里为了想系统的学习一下Vue,自己搭建项目的每个基础组件和架构就没有使用。小伙伴们可以根据自己需要选择。

目录
相关文章
|
6天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
21 0
|
6天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
6天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
6天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
12 0
|
1天前
|
JavaScript Java 关系型数据库
基于SprinBoot+vue的租房管理系统2
基于SprinBoot+vue的租房管理系统2
8 0
|
2天前
|
自然语言处理 JavaScript 数据可视化
5个值得推荐的Vue后台管理框架
几个优秀好看的 Vue 后台管理框架,每个框架都有自己的特点和优势,开发者可以根据项目需求选择适合的框架。
12 0
|
5天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
13 1
|
6天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
6天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
6天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
10 0