【Vue3速成】01-npm+vue初体验+vite构建vue工程化

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨你正在阅读「半路出家玩前端」系列文章✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨弹简特 个人主页❄️个人专栏直通车软件测试入门记野生测试修炼手册 | APP 专项测试笔记接口测试从入门到跑路☕一个后端的 JavaEE 续命指南网络原理续命手册Python 从零摸索日记✨靠热爱去书写自己靠勇敢去书写生活✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ 博主简介:文章目录一、npm常见的命令1、项目初始化2、安装依赖2.1 常用命令3、升级依赖4、卸载依赖5、查看依赖6、运行脚本命令npm run二、vue3初体验1、要有一个基本的标签2、导入vue框架3、创建vue对象4、设置值5、挂载三、使用vite构建vue前端工程化1、创建工程2、如何下载依赖和运行3、vite的作用一、npm常见的命令1、项目初始化生成package.json项目配置文件等价于 Maven 的 pom.xml里面有对应的依赖npm init交互式填写项目信息一步步生成配置文件npm init -yy代表的是yes快速初始化所有选项使用默认值直接生成package.json2、安装依赖注意只有已经有了package.json配置文件之后我们才可以安装依赖语法npm install 依赖名称或者npm i 依赖名称比如安装vue下载完成之后多了node_modules 和 package-lock.json其中package-lock.json存放详细的依赖信息而node_modules 存的是你下载的依赖。2.1 常用命令npm install 包名/npm i 包名安装项目依赖写入 dependenciesnpm install 包名版本号安装指定版本的依赖npm install -g 包名安装全局依赖所有项目均可使用npm install根据package.json安装所有依赖其中注意npm i在哪里使用场景如下3、升级依赖npm update 包名将指定依赖升级到最新兼容版本4、卸载依赖npm uninstall 包名卸载项目依赖并自动更新配置文件5、查看依赖npm ls查看当前项目的所有依赖npm list -g查看全局安装的所有依赖6、运行脚本命令npm run语法npm run 运行脚本的键什么事运行脚本中的键呢请看下述然后怎么运行呢如下所示二、vue3初体验1、要有一个基本的标签2、导入vue框架首先我们的vue是一堆js写的那么你想要人家写的框架你就得导进来呀 3、创建vue对象4、设置值你创建vue对象干什么我们就是为了设置值呀怎么设置你看好然后给我在里面设置对应的值那么请问你设置这个msg的值干什么有什么用就只是干巴巴的设置咱们肯定是要在页面展示的呀那谁来展示肯定是html标签来展示呀所以你得将这个msg值返回给html标签那么此时你返回就完了吗肯定不是呀你说让他给html标签展示那你告诉他是哪一个标签了么没有啊所以我们就得告诉他你要在哪一个表情中展示所以下一步就是挂载5、挂载如何访问使用{{变量}}访问结果注意事项那么后续我们学习vite构建工程化之后我们是不需要写什么creatApp和setup以及mount的我们直接写属性和函数就行三、使用vite构建vue前端工程化vite是构建工程化的脚手架帮我们创建工程帮我们提前设置好一些依赖1、创建工程如何使用vite构建vue项目呢输入npm create vite输入项目名选择vue框架选择语言JavaScript选择yes然后回车此时我们的工程就创建出来了结果2、如何下载依赖和运行如果依赖还没有下载1进入项目目录下2使用npm i下载依赖3使用npm run dev运行开发环境的项目浏览器访问3、vite的作用快速创建项目使用脚手架可以快速搭建项目基本框架避免从零开始搭建项目的重复劳动和繁琐操作从而节省时间和精力统一的工程化规范前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范让不同开发者在同一个项目上编写出风格一致的代码提高协作效率和质量代码模板和组件库前端脚手架可以包含一些常用的代码模板和组件库使开发者在实现常见功能时不再重复造轮子避免因为轮子质量不高带来的麻烦能够更加专注于项目的业务逻辑自动化构建和部署前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作可以通过集成自动化部署脚本自动将代码部署到测试、生产环境等