美文网首页
Vite+vue3+Ts+pinia开发(一:初始、基础安装、踩

Vite+vue3+Ts+pinia开发(一:初始、基础安装、踩

作者: 邪七 | 来源:发表于2022-07-24 11:13 被阅读0次

一、初识 Vite+vue3+Ts+pinia

先初识吧,先献上官网:
Vite中文网
Vue3中文网
pinia官网 / pinia中文文档
element-plus官网(PC UI库)
Vant4官网 (MB UI库)

二、相关环境安装

基础环境Node 16.8.0,这个就不说了吧。 没有的可以去这里下载:阿里NODE下载镜像地址

node -v // v16.8.0
npm -v // 7.21.0

// 安装 vite
npm install vite -g
...
vite -v // vite/3.0.2 win32-x64 node-v16.8.0

// ----------------------------------------------------
// 安装 vue/cli
npm install -g @vue/cli
...
vue -V // (注意这里是大V)@vue/cli 5.0.8

至此,基础环境完毕。下面开始构建项目。

三、创建项目

没啥好说的,跟着官方文档走:

npm init vite@latest
Project name: cq-function
Select a framework: vue
Select a variant: vue-ts


Scaffolding project in ****\cq-function...

Done. Now run:

  cd cq-function
  npm install
  npm run dev

到这里,项目安装完毕,然后就让你进入了。

cd cq-function
npm install
......// 经过10来秒的等待
npm run dev

  VITE v3.0.2  ready in 360 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

页面就出来了,至此、初始+创建完事


image.png

PS:此时可以直接npm run build打包

踩坑:
如遇:'HelloWorld' is declared but its value is never read.Vetur(6133)
打开编辑器 设置-> 搜索vetur 找到下图:取消打钩就可以了


image.png

完成上面就可以进行第二步开发了:
Vite+vue3+Ts+pinia实战(二:路由、pinia、UI库安装)

相关文章

  • 游戏开发笔记2-phaser

    使用TypeScript+Phaser开发游戏 操作方式 安装VSCode npm 安装TypeScript 初始...

  • Mac开发环境搭建

    基础环境 安装mac 开发工具 安装 Homebrew iOS开发环境(可选) rvm 安装(可选) 安装rvm ...

  • Golang 安装、开发环境搭建、常用指令、基础

    Golang 安装、开发环境搭建、常用指令、基础 一、安装 安装homebrew 安装golang 配置环境变量 ...

  • VisualGDB文章汇总

    VisualGDB的安装VisualGDB开发经验安装VisualGDB 5.2 发生 "类型初始值设定项引发异常...

  • 01.初始化环境

    初始化项目 安装需要的包 安装基础包 安装和配置babel 安装处理css包 安装处理html包 安装处理图片的包

  • webpack搭建React环境与各配置详解

    1 基础配置与详解 1.1 初始化项目 1.2 安装webpack 安装webpack 和webpack服务 在项...

  • npm 命令合集

    初始化package.json文件 安装包(开发和生产都会用到) 安装包(只在开发时用) 安装用的属性简写含义 查...

  • 搭建小程序:taro

    一、开发环境 node -vnpm -v 二、安装依赖 全局安装@tarojs/cli 三、项目初始化 使用命令创...

  • git基础命令.md

    [toc] 1 基础起步 1.1 ubuntu的安装 安装 初始设置用户基本信息 1.2 建立空仓库 1.3 添加...

  • mysql8安装

    1、安装mysql8 1.1安装mysql基础包 1.2 初始化安装包 安装后默的数据目录在 /var/lib/m...

网友评论

      本文标题:Vite+vue3+Ts+pinia开发(一:初始、基础安装、踩

      本文链接:https://www.haomeiwen.com/subject/kqdgirtx.html