首页 > 其他分享 >Vue3 —— 商城项目

Vue3 —— 商城项目

时间:2023-06-15 20:55:16浏览次数:37  
标签:vue 项目 create script 商城 template Vue3 vite

create-vue

create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应。

执行如下命令,这一指令将会安装并执行 create-vue

npm init vue@latest

无论您之前是否安装过create-vue,执行npm init vue@latest命令都会创建一个新的Vue项目。这个命令会使用Vite和Rollup构建工具来创建项目,这是Vue官方目前推荐的构建工具。如果您之前已经安装过create-vue,那么执行这个命令将会更新create-vue到最新版本。

新建项目后记得安装依赖

npm install

项目目录

img
  • vite.config.js -项目的配置文件基于 vite 的配置

  • package.json -项目包文件核心依赖项变成了 Vue3.x 和 vite

  • main.js -入口文件 createApp 函数创建应用实例

  • app.vue -根组件SFC单文件组件 script - template - style

    变化一: 脚本script和模板template顺序调整

    变化二: 模板template不再要求唯一根元素

    变化三: 脚本script添加setup标识支 持组合式API

  • index.html -单页入口提供 id 为 app 的挂载点

标签:vue,项目,create,script,商城,template,Vue3,vite
From: https://www.cnblogs.com/masahiko/p/vue3_shop_project.html

相关文章

  • 「路飞项目01」
    1企业项目类型#1面向互联网用户:商城类项目-微信小程序商城-app商城-得物-饿了么-问卷网#2面向互联网用户:二手交易类的-咸鱼-转转#3公司内部项目:python写的重点-传统软件行业,给客户做软件:国家电网,社保局,银行,医院,大客户-互......
  • 排课项目小结
    排课项目小结一、个人在小组中参与工作总览(简述)小组项目需求阶段:项目流程:在共同确认了项目题目之后,我参考了老师课堂上介绍的上一届学生项目的流程将要实现的功能进行了拆分,并与小组成员分享了我对排课系统业务流程的想法。在课后积极参与项目需求分析和讨论工作,与组内成员......
  • 排课项目文档
    高校排课系统软件需求与数据库设计1、系统概述排课系统业务流程如下:1)入学前,专业负责人设计培养方案;2)专业负责人安排下学期必修课程和专业选修课程;3)专业负责人安排课程班级和教师,教务处老师安排课程时间和地点;4)学生选择专业选修课程班级;5)个人课程表确定并输出;2、......
  • 项目思考过程
    排课系统实现功能分析需求描述(陈述功能地细节)教务处排好课程之后学生选课,最终生成完整的课程表。‚前提条件(想要开启本功能需要提前准备什么,聚集)记录所有课程得课程总表。ƒ操作该功能的人员所在岗位的名称(尽量准确描述员工工作岗位,而非管理员)专业负责人制定培养方案,教务......
  • 02项目数据库隐藏密码,封装logger,环境变量的设置,封装全局异常,Response,开启media访问,前
    1项目数据库之隐藏密码#我们直接把mysql的用户名和密码写死在了代码中----》后期可能会存在风险----》代码如果泄露----》mysql的用户密码泄露----》可以远程登录----》脱裤(拖库)----》所有数据会被黑客获取到----》卖钱#华住---》在代码中把数据库用户名和密码写死了----》......
  • idea 配置 javaweb项目
    对于老的web项目,不是springboot,需要的配置一、git clone 项目 二、配置 projectstructure 这几个都要配置,当然有的项目点开默认有的话修改一下就行,没有就 的手动添加 project 这几个都填好填对 没有classes 就创建一个 modules libbraries 把WEB-INF......
  • 一文读懂物联网平台如何搞定80%以上的物联网项目
    太卷了!一套物联网平台就能搞定80%以上的项目?! 在刚刚结束的AIRIOT4.0物联网平台发布会上,航天科技控股集团股份有限公司智慧物联事业部总经理田淼给出答案。  在主题演讲环节,田总以【80%的物联网项目服务商都会面临的需求】作为切入点,表达了AIRIOT4.0作......
  • Vue项目打包部署上线时devServer.proxy代理失效如何解决?使用nginx的proxy_pass 代理跨
    Vue项目打包部署上线时devServer.proxy代理失效如何解决?使用proxy_pass代理跨域转发前言本篇文章用于记录项目前端部署上线遇到的问题,包含对问题的思考、解决思路,以及从中获得的收获。正确的部署流程我也写了一篇文章,供大家参考使用宝塔将Vue2+Nodejs全栈项目打包部署到腾讯云服......
  • 软件测试从小白进阶高手-Python自动化+Jmeter性能+App项目+接口测试
    软件测试从小白进阶高手-Python自动化+Jmeter性能+App项目+接口测试软件测试技能,包括Python自动化、Jmeter性能测试、App项目测试、接口测试。接下来,我将从每个技能点给出一些更详细的介绍。1.Python自动化测试Python已经成为测试人员的新宠,Python自动化测试的原因在于Python......
  • 项目说明 | 网页计算器自动化测试项目
    需求:1、对网页计算器,进行加法的测试操作。通过读取数据文件中的数据来执行用例。2、网址:http://cal.apple886.com/测试点:1、加法:1+1=22+9!=10...2、减法:3-1=25-3!=8...3、乘法:2*3=65*7!=2...4、除法:8/2=49/3!=2...技术:1、使用openpyxl读取e......