Vue3+Vite搭建项目

简介: Vue3+Vite搭建项目

1.安装nodejs(建议装14版本稳定)



装过的同学可以忽略

下载 | Node.js 中文网


装完之后会有一个命令叫 npm

可以在终端输入npm -v 来检查是否安装成功


4055b76360804765a7359b46c6b9d636.png


2.构建vite项目



官方文档开始 {#getting-started} | Vite中文网


vite 的优势


冷服务 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM原生 ESM 动态导入


HMR 速度快到惊人的 模块热更新(HMR)


Rollup打包 它使用 Rollup 打包你的代码,并且它是预配置的 并且支持大部分rollup插件


使用vite初始化一个项目


npm

npm init vite@latest


Yarn


yarn create vite


运行之后


项目名称


788c5e724a0d4281a8c4180ecde95add.png


构建的项目模板


67bf97bcf0b1437bb25f888d0605b23d.png


切换目录


npm install 安装依赖包


npm run dev 启动


5ef70ca6109648b09e0f8161834a5d8a.png


package json 命令解析


{
  "scripts": {
    "dev": "vite", // 启动开发服务器,别名:`vite dev`,`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}


3.安装Vue cli脚手架



npm install @vue/cli -g


检查是否安装成功


de66408145be4217848936b7974b9512.png


使用 vue create <project>

构建我们的cli 项目可以去对比一下

相关文章
|
4天前
|
JavaScript
如何创建一个Vue项目(手把手教你)
这篇文章是一篇手把手教读者如何创建Vue项目的教程,包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤,并提供了一些常见第三方库的引入方法。
如何创建一个Vue项目(手把手教你)
|
5天前
|
前端开发 JavaScript API
基于Vue3+Hooks实现4位随机数和60秒倒计时
本文介绍了如何在Vue3中使用Hooks API来实现生成4位随机数和执行60秒倒计时的功能,并提供了详细的代码示例和运行效果展示。
23 1
基于Vue3+Hooks实现4位随机数和60秒倒计时
|
1天前
|
JSON JavaScript 前端开发
Vue3在工作中使用的一些经验总结
这篇文章是关于Vue 3项目中使用TypeScript的一些经验总结,包括如何配置TSLint进行代码规范和类型检查,以及如何将现有的JavaScript代码迁移到TypeScript的步骤和注意事项。
Vue3在工作中使用的一些经验总结
|
4天前
|
JavaScript 算法 API
Vue 3有哪些新特性
【8月更文挑战第16天】Vue 3有哪些新特性
25 1
|
5天前
|
JavaScript UED
如何在Vue3项目中使用防抖节流技巧
在Vue 3项目中使用防抖和节流技巧以优化组件性能,包括使用`lodash`库和自定义实现这两种方法。
10 0
如何在Vue3项目中使用防抖节流技巧
|
23小时前
|
JavaScript 前端开发 API
Vue3入门
Vue3入门
4 0
|
4天前
|
JavaScript
创建 Vue3 项目
创建 Vue3 项目
10 0
|
1天前
|
JavaScript
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
这篇文章详细介绍了Vue路由中的query参数、命名路由、params参数以及props配置的使用方式,并通过实际项目案例展示了它们在开发中的应用和测试结果,同时解释了`<router-link>`的`replace`属性如何影响浏览器历史记录。
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
|
1天前
|
JavaScript
Vue学习之--------VueX(2022/8/31)
这篇文章是关于VueX的基础知识介绍,涵盖了VueX中的state、mutations、getters和actions的定义和使用,以及Action提交mutation而非直接变更状态,以及mutations的同步执行特性。
Vue学习之--------VueX(2022/8/31)
|
1天前
|
JavaScript
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
这篇文章通过一个实际的Vue项目案例,演示了如何在Vuex中实现多组件间共享数据。文章内容包括在Vuex的state中新增用户数组,创建Person.vue组件用于展示和添加用户信息,以及在Count组件中使用Person组件操作的数据。通过测试效果展示了组件间数据共享和状态更新的流程。
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)

相关实验场景

更多