企业网站和展板建设,网站建设运营协议书,怎么制作网站应用,天津室内设计公司排名VUE
NPM
npm的全称是Node Package Manager
中文名为Node.js包管理器#xff0c;是一个NodeJS包管理和分发工具#xff0c;已经成为了非官方的发布Node模块(包)的标准。NPM可以方便地从一个全球的代码库中获取并安装Node.js模块#xff0c;这些模块可以用于构建应用程序、…VUE
NPM
npm的全称是Node Package Manager
中文名为Node.js包管理器是一个NodeJS包管理和分发工具已经成为了非官方的发布Node模块(包)的标准。NPM可以方便地从一个全球的代码库中获取并安装Node.js模块这些模块可以用于构建应用程序、工具和包等。开发者可以通过NPM来搜索、安装、更新和卸载各种Node.js模块。此外NPM还提供了发布和共享代码、管理依赖、版本控制等功能可以帮助开发者更方便地开发和分享代码
下载安装NODEJS(官网下载即可) 安装后即可以使用npm命令 设置镜像
npm config set registry https://registry.npm.taobao.org 或https://mirrors.huaweicloud.com/repository/npm/
一个是淘宝镜像一个是华为镜像 查看是否已经成功设置镜像
npm config get registry 创建VUE3项目
使用vite直接创建vite是下一代前端开发与构建工具。
vite的优点
快速的开发体验vite采用浏览器原生的模块化系统避免了传统构建工具的静态打包和编译从而提高了开发效率和构建速度。它还支持HotModuleReplacement(HMR)和快速刷新等功能可以实时更新代码和预览修改效果让开发者专注于开发过程中的实际需求丰富的功能vite对TypeScript、JSX、CSS等支持开箱即用无需额外配置。它还提供了优化的构建选项可以选择多页应用或库模式的预配置Rollup构建灵活的API和完整TypeScript类型vite提供完全类型化的API和灵活的API使得开发者可以更加方便地使用它进行开发插件化的架构vite允许开发者通过插件来扩展其功能这使得vite可以适应各种不同的项目需求更好的兼容vite使用ES Module作为模块系统比CommonJS更现代化、更高效。同时它还提供了兼容CommonJS的方案使得一些依赖CommonJS的库也可以在vite中使用轻量级的解决方案vite是一个非常轻量级的解决方案其核心代码非常小这使得它可以在各种设备上快速运行包括在低性能的设备上社区支持vite得到了广泛的社区支持和维护这意味着开发者可以从社区中获得帮助和支持并且可以快速地解决遇到的问题
1.使用npm安装yarn工具
npm install -g yarn 2.使用yarn安装vite vue项目填入项目名yarn create vite
也可以使用npm直接初始化npm create vitelatest 3.选择项目模板 4.选择语言结构 5.执行安装依赖包
用vscode打开创建的项目文件夹打开终端
npm install 6.使用yarn dev启动项目
npm run dev 7.访问 配置路由
在views文件夹中创建所需要的vue文件 在src中创建router文件夹在此文件夹中创建index.js文件
router/index.js就是路由的配置文件 想要使用路由必须在该项目中安装vue-router组件
npm install vue-router 定义路由文件 在main.js文件中引用路由配置 在App.vue文件中添加路由占位符 访问
axios异步请求
在项目中安装axios
npm install axios 在src中新建文件夹util新建文件http.js 在src中新建文件夹api在文件夹中创建index.js 新建一个vue页面(做好路由)发送请求 配置代理 绑定数据和函数
vue3推荐使用setup函数绑定数据 使用ref函数声明响应式的值类型数据的初始值 在setup函数中对ref()函数声明的数据进行取值和赋值时需要使用.value 在template组件中使用ref()声明的数据直接使用即可不需要使用.value 使用reactive函数声明响应式引用对象
也可以使用ref声明应用对象 如果要声明一个引用类型(对象或数组)的相应数据推荐使用reactive函数声明 ref()也可以但是reactive声明的数据可以直接对属性赋值但是ref声明的数据 还是需要使用.value进行赋值 使用markRaw函数标记应用类型的数据只相应自身对象不要深入绑定相应只能对该对象整体赋值内部不做绑定可以减少资源的消耗 使用ref绑定的数据都会在vue中开启深度的绑定但是一些纯展示型的数据是不会对内部数据进行修改的可以使用markRaw标记该数据已达到优化资源的效果
使用ElementUI
在VUE3中要使用element-plu使用
npm install element-plus --save
命令安装
全局引入在main.js中直接引入
import ElementPlus from apos;element-plusapos;
import apos;element-plus/dist/index.cssapos;
