首页 > 其他分享 >Vue.js前端框架之vite+vue+naive前端项目模板

Vue.js前端框架之vite+vue+naive前端项目模板

时间:2024-02-17 15:12:56浏览次数:22  
标签:vue HTML 项目 前端 ts js Vue

1.搭建Vue示例项目

npm create vue

 cd vue-demo :进入项目目录

npm install :安装所有依赖

npm run dev:启动项目

2.了解Vue开发和工作原理

2.1 package.json

类似于Python项目中pyproject.toml,包含了项目名称、版本、命令、依赖、设定

2.2 index.html

浏览器访问到的HTML文件

 加载src/main.ts 项目代码

前端项目和浏览器的桥梁

2.3 main.ts

消除错误

ts配置文件(ts.config.app.json) "moduleResolution":"node"

1.实例化vue的App

将app挂载到HTML中

前端项目和index.html的桥梁

2.4 App.vue

.vue是Vue.js创建的一种格式,也叫单文件组件(SFC)

模板(HTML)、脚本(JS)、样式(CSS)合并到同一个文件里

标签:vue,HTML,项目,前端,ts,js,Vue
From: https://www.cnblogs.com/lgs-tech/p/18017984

相关文章

  • 【Vue前端】vue使用笔记0基础到高手第2篇:Vue进阶知识点介绍(附代码,已分享)
    本系列文章md笔记(已分享)主要讨论vue相关知识。Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。Vue.js是一个构建数据驱动......
  • vue基础知识和原理(二)
    1.13列表渲染v-for指令用于展示列表数据语法:v-for="(item,index)inxxx":key="yyy"可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)<divid="root"><!--v-for指令:1.用于展示列表数据......
  • odoo jsonrpc
    importjsonimportpprintimportrandomimporturllib.requestHOST='192.168.2.21'PORT=8069DB='wywr17'#数据库名称USER=''#登录用户名PASS=''#登录密码defjson_rpc(url,method,params):data={"......
  • VSCOde+Nodejs+Typescript前端开发环境
    1.安装Node.js下载地址:https://nodejs.org/enlts版本:长久稳定版本安装:默认安装就可以了验证:node2.VSCode下载地址:https://code.visualstudio.com/Download安装:默认安装语言切换:安装中文插件,重启 2.1修改终端cmd模式:1.点击设置图标,选择CommandPalette 2.输入:Ter......
  • [Vue] CSS中的v-bind
    在Vue中说到v-bind大多数时候都是想到template中动态绑定script中的响应式数据。但其实在单文件组件(SFC)中,<style>标签内也可以使用v-bind函数绑定数据。如上图第18行代码,使用v-bind(color)绑定了数据。当数据变化时,css样式随之变化:原理:(截取自Vue官方文档)实际的值会被编......
  • 启动vue-element-admin遇到问题解决方案
    概述从https://github.com/PanJiaChen/vue-element-admin下载代码,按照文档执行,期间遇到一些列问题。1#clonetheproject2gitclonehttps://github.com/PanJiaChen/vue-element-admin.git34#entertheprojectdirectory5cdvue-element-admin67#insta......
  • P1198 [JSOI2008] 最大数
    原题链接题解1:单调栈+并查集?单调栈特性:栈内元素大小和序号由栈底到栈顶具有单调性,本题大小单调减,序号单调增维护:新元素入栈时,栈内剩余的所有小于该元素的元素出栈,并视新元素为集合首领,然后新元素入栈查询:查询集合首领即可code1#definelllonglong#include<bits/stdc++.h>......
  • 前端知识点学习汇总,温故而知新
    前端知识点学习汇总,温故而知新1.CSS行内样式表:权重高,div2.内部样式表,写在headerstyle里:结构+样式选择器{属性1:属性值1;属性2:属性值2}3.外部样式表:style.css,将结构和样式分开<head><linkrel="stylesheet"href="css/style.css"></head>样式表优点缺点控制范......
  • JSON相关注解的使用
    1.@JsonInclude当使用json进行序列化时,往往会遇到某个实体对象的属性为null,可以使用如下类注解使得属性值为null的时候Java Bean不参与序列化可以作用在类上,也可以作用在字段上@JsonInclude(JsonInclude.Include.NON_NULL)     其他常量值包括:Include.Include.ALWAYS   ......
  • idea里集成uglifyjs实现自动和手动压缩混淆js
    项目中可能会多次修改某些*.js文件,但是引用的是*.min.js,所以需要再改完源码后生成压缩的min.jsuglifyjs是个不错的工具,但是单独用略显麻烦,如果能整合到idea就好了。正好idea有这个功能。 1.安装nodejshttps://nodejs.org/dist/v8.9.3/node-v8.9.3-x64.msi   下......