搭建环境，创建vue3+typescript+vuetify项目

2024-05-09 06:05:27

使用场景

使用Vue框架创建 vue3+typescript+vuetify3 项目；

一. Node下载安装及配置

1. node官网下载地址： https://nodejs.org/en/

2. 执行安装档，没有需要修改的部分，一直“next”；

3.环境变量默认添加，验证是否安装成功：

$ node -v  ---查看node版本
$ npm -v   ---查看npm版本

4.修改模块下载位置：

---查看npm 全局模块存放路径
$ npm get prefix  ---查看npm 缓存默认存放路径
$ npm get cache   ---修改npm 缓存默认存放路径
$ npm config set prefix "D:\Node\nodejs\node_global"---修改npm 缓存默认存放路径
$ npm config set cache "D:\Node\nodejs\node_cache"

— 由于 node 全局模块安装包，大多是通过命令行命令执行，所以需要【node_global】的路径添加到系统变量（图中个人和系统的path都有加），方便用命令行运行：

————注意：
确认成功安装nodejs后，现在可以创建项目了，但一定要确保自己的网络可以执行 npm install 命令，可以先下载一个包试试（如图）

切换到可用的网络，也可以是自己开热点：

跳（二）：可以创建vue3项目
跳（三）：可以创建 vue3+vuetify 项目

二. vue下载安装及配置

1.官网地址：https://cn.vuejs.org/guide/quick-start.html#try-vue-online
2. 根据官网提示，运行创建vue应用的命令：

$ npm init vue@latest
$ cd [Project name]
$ npm install
$ npm run dev

(此时在可用网络，第一次运行会下载好需要的工具)

切换回内网，运行创建vue项目的命令：

使用命令行启动，打开页面：

三. vuetify下载安装及配置

1. Vuetify 3 官网位置：(暂时只有英文版)
https://vuetifyjs.com/en/getting-started/installation/
2. 根据官网提示，运行创建vuetify 应用的命令：
(先进入准备好放项目的文件夹下)

$ yarn create vuetify (因为运行时报错了)
$ npm create vuetify
$ cd [Project name]
$ npm list vue  ---查看项目vue相关信息

(此时在可用网络，第一次运行会下载好需要的工具)

使用命令行启动，打开页面：

搭建环境，创建vue3+typescript+vuetify项目相关推荐

搭建环境创建vue项目
搭建环境创建vue项目 1.安装npm 2.使用淘宝NPM镜像 3.项目初始化 4.命令行创建项目 1.安装npm 下载对应你电脑系统的Node.js版本:下载 | Node.js 中文网具体安装步 ...
python创建django项目_搭建Python-Django环境,创建第一个Django项目
曾想学爬虫,没想到误入python web班,在美女老师shirely的指导下,搭建了好Django环境,试着开始做第一个web项目一.Python环境安装 1.Python2.7的下载从Pyth ...
初识JavaWeb(web开发概述、web开发环境的搭建、创建并发布web项目)
文章目录 JavaWeb web开发概述 web开发环境的搭建 web服务器的选择环境搭建 Tomcat的配置文件创建发布Web项目 JavaWeb web开发概述学习web开发, 我们需要一台 ...
idea2020.2.2怎么创建web项目_创建Vue3.0的项目
1. 查看Vue的环境版本 Vue -V 如果版本低于4.0,则需要升级Vue的版本 npm install -g @vue/cli 2. 创建Vue 3.0的项目 3. VS Code 的环境配置 ...
若依微服务版手把手教你本地搭建环境并运行前后端项目
场景若依微服务版RuoYi-Cloud,基于Spring Boot.Spring Cloud & Alibaba.OAuth2的前后端分离的后台管理系统. RuoYi-Cloud 是一个 J ...
Ionic介绍以及搭建环境、新建和运行项目
场景 Ionic介绍 Ionic 是一个开源的移动应用程序开发框架,它可以轻松地使用web 技术构建高质量的跨平台的移动应用.可以让我们快速开发移动App.移动端WEB 页面.微信公众平台应用,混 ...
猿创征文 | 开箱即用 yyg-cli：快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
创建vue3项目（vite+js）
创建vue3+vite+js项目 1.找到指定的工作目录,进入该目录下 2.输入创建命令 3.创建成功后,进入到项目中安装npm 4.运行项目 1.找到指定的工作目录,进入该目录下 cd + 目录路径 ...
Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP
本文完整版:<Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP> Vue3 Typescript + Axios 全栈开发教程前端 Vue3 ...

最新文章

热门文章