首页 > 其他分享 >Vue3+TS+Vite+pinia

Vue3+TS+Vite+pinia

时间:2024-04-11 09:46:13浏览次数:13  
标签:npm vue TS Vite pinia 安装 路由

一、创建项目

       创建文件夹,然后cmd,输入以下内容。然后选择TS版本。

npm create vite

二、安装依赖

     在vs code中,使用终端,输入命令 

npm i

三、安装其他插件

       3.1、路由 vue-router

                多页面应用需要安装路由。所以需要使用vue-router。

npm i vue-router

      3.2、全局插件 pinia

              vue有两个全员插件,vueX和pinia,这里我们使用pinia。

npm i pinia

     3.3、请求 Axios

npm i axios

     3.4、前端框架 element plus

npm i element-plus

 四、运行项目      

npm run dev

退出终端命令:

cls

 

 五、初始化代码环境

         5.1、修改App.vue      

     5.2、修改style.css

     5.3、删除HelloWorld.vue       

 六、开始项目

        6.1、路由配置

                1、 新增文件夹views。           

         2、配置路由

  3、启用路由

         4、测试运行

 

       到这里页面就已经完全配置好了。

      6.2、安装sass     

              1、安装       

npm i sass sass-loader -D

             2、使用

        6.3、使用Element plus

 

             

            6.4、MD5加密密码                  

npm install md5js

     6.5、安装NProgress

npm install --save nprogress

              因为我们的事TS项目,还需要安装其类型声明文件,否则会报错。编译不过。

npm i @types/nprogress -D

 

 

   

 

标签:npm,vue,TS,Vite,pinia,安装,路由
From: https://www.cnblogs.com/xiaobaicai12138/p/18118526

相关文章

  • echarts X轴类目名太长时隐藏,hover时显示全部
    echarts图表X轴在柱状图中,X轴类目名如果数据太长;echarts会默认进行隐藏部分字段;如果我们想让每一个类目名都显示出来,需要进行额外的处理X轴类目名太长时,默认只显示一部分类目名<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="......
  • LOJ#6020. 「from CommonAnts」寻找 LCT
    linkofproblem。依旧是非常精妙的做法呢!问了神仙lca才知道怎么做了,目前网上是没有题解的,有的只是一份带注释的代码的英文题解。我的细节实现也是看了这份代码得以补足的。我们定义一些量:原树重心为rt,rt的某个儿子叫做son,son子树内的某个节点为x。首先考虑哪些连通块......
  • CF958F1 Lightsabers (easy) 题解
    题面。不好意思,当我看到\(1\len\le100\),\(1\lem\len\)的那一刻,我承认我心动了。题目没翻译,用翻译软件翻译了才看懂。思路依据题意直接模拟即可。这里我用了三层循环来模拟。第一层为\(len\),表示长度;第二层为\(from\),表示出发点,此时需要遍历的区间的终点\(to=from......
  • CF1737C Ela and Crickets 题解
    题面。原先大佬的题解写的很好,但这里想讲一下不同做法。思路题目中说的\(L\)型有四种情况,很容易就可以想到特殊情况,那就是\(L\)型恰好贴在棋盘的四个角上,这时我们发现,这样子棋子只能在棋盘的其中两条边上移动。对于四个角我们进行四次特判。看普通情况,在手动模拟完样例后......
  • 布隆过滤器 及 Redis Sorted sets 使用注意事项
    布隆过滤器基本概念布隆过滤器(英语:BloomFilter)是1970年由伯顿·霍华德·布隆(BurtonHowardBloom)提出的。它实际上是一个很长的二进制向量和一系列随机映射函数。布隆过滤器可以用于检索一个元素是否在一个集合中。它的优点是空间效率和查询时间都远远超过一般的算法,缺点是有......
  • group by grouping sets计算每个分组的占比
    计算每个分组的数量selectparent_dict_code,count(*)fromtb_data_dictgroupbyrollup(parent_dict_code);计算占比,注意要*1.0,否则仍为整型,全为0selectparent_dict_code,count(data_dict_id),(selectcount(data_dict_id)fromtb_data_dict)assum_all,count(data_dict......
  • nodejs + ts + nodemon + webpack 代码热更新
    依赖:npminodemonwebpackwebpack-clits-loadertypescript//webpack.config.jsimport{defaultaswebpack}from"webpack";importnodeExternalsfrom"webpack-node-externals";constplugins=[newCleanWebpackPlugin({dangero......
  • TSA343G00-250J2 轻触开关 SMD
    TSA343G00-250J2规格信息:商品类型轻触开关按钮作用方向立式垂直开关高度2.00mm触点额定电流50mA@12VDC按钮头类型圆形按钮是否带指示灯不带灯作用力250gf指示灯类型,颜色-外形尺寸(长宽)3.95mmx2.90mm电路结构单刀单掷 产品类型:TSA343G00-250J2是一款高性能......
  • [echarts]vue2项目中折柱图-柱形图伪3d效果实现
    不知道是不是现在的版本更新了,echarts-gl在vue2项目中不能适配使用,难蹦一.需求分析与设计思路项目当中遇到改版升级,想要实现如下的一下折柱图的立体效果想在原来平面柱状图的基础上,有立体的效果.本来打算用echarts-gl库来实现3d版的柱形图,但是引入和配置后,浏览器总是......
  • Qt QCharts绘制柱状图,柱高和y轴数据刻度不匹配
    QCharts绘制柱状图,柱高和y轴数据刻度不匹配1//在项目pro文件中添加以下内容2QT+=charts34//在.h文件中添加以下内容,注意:需要将头文件及命名空间添加到ui命名空间之前,否则将提示错误5#include<QtCharts/QChartView>6#include<QtCharts/QBarSerie......