vue项目创建安装

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
vite和vue-cli 区别

上课案例老师项目是用vite创建项目：安装vite—创建vite项目1、文档介绍
  1. 、搭建 Vue 项目
  3. 1、Vite 介绍
  4. Vite 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成
  5. 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
  6. 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
  7. 官网：https://cn.vitejs.dev/
  11. 2、Vite 安装
  12. # 1、安装vite脚手架，全局安装
  13. // yarn
  14. yarn global add vite
  15. // npm
  16. npm install -g vite
  18. # 安装完成后，需要配置环境变量，根据自己的nodejs目录进行配置路径
  19. 我的电脑-》右击-》属性-》高级系统设置-》环境变量-》系统变量-》Path-》编辑-》新建(赋值nodejs目录下的node_global路径)
  20. D:\Program Files\nodejs\node_global\
  25. 3、Vite 升级
  26. # yarn
  27. yarn global upgrade --latest vite
  28. # npm
  29. npm update -g vite
  34. 4、Vite 卸载
  35. # yarn
  36. yarn global remove vite
  37. # npm
  38. npm uninstall vite -g
  42. 5、Vite 创建 Vue 项目
  43. # 1、创建一个项目
  44. npm init vue@latest
  46. # 2、需要安装create-vue@3.3.4吗？
  47. Need to install the following packages:
  48.   create-vue@3.3.4
  49. Ok to proceed? (y)
  51. # 3、项目名称
  52. Project name：
  54. # 4、是否添加TypeScript
  55. Add TypeScript?
  57. # 5、是否添加JSC支持
  58. # 5.1、JSX即JavaScript XML，是React发明的一种JavaScript的语法扩展，允许 HTML 与 JavaScript 的混写；JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象。
  59. Add JSX Support?
  61. # 6、是否为单页应用程序开发添加Vue Router路由管理组件
  62. Add Vue Router for Single Page Application development?
  64. # 7、是否添加Pinia组件来进行状态管理
  65. Add Pinia for state management?
  67. # 8、是否添加Vitest来进行单元测试
  68. Add Vitest for Unit Testing?
  70. # 9、是否添加Cypress来进行单元测试和端到端测试
  71. Add Cypress for both Unit and End-to-End testing?
  73. # 10、是否添加ESLint来进行代码质量检查
  74. Add ESLint for code quality?
  78. 6、运行项目
  79. 参见图一
  80. # 1、进入目录
  81. cd vite
  83. # 2、安装模块
  84. 没有图二才执行这个语句
  85. yarn install   或者 npm install  
  87. # 3、启动项目
  88. # 3.1、yarn
  89. yarn dev       或者 npm dev 
  90. # 3.2、npm
  91. npm run dev
【文章转自bgp服务器 http://www.558idc.com/yz.html提供，感恩】
更多阅读