速创建vue3 + vite 项目工程

于 2024-08-19 10:57:12 发布
阅读量813 收藏 10
点赞数 12
分类专栏： vuejs 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/odogroup/article/details/141317808
版权

准备工作：

1）安装Node.js  官网：https://nodejs.org/

2）安装Visual Studio Code 官网： Visual Studio Code - Code Editing. Redefined

1）创建文件夹

2）将刚创建的文件夹拖入Visual Studio Code打开

3）Visual Studio Code 弹出对话框，选择：是

4）Visual Studio Code 顶部菜单栏，找到 终端 按钮，点击 选择 新建终端 选项。

5）使用命令输入： node -v (  Node.js 版本在16+ )

6）使用命令输入： npm -v

 

7）使用命令输入 : npm create vite@latest  （需要等待几分钟）

8）请求要创建的vue版本结果，输入 y 回车。

9）选择vue ，回车。

10）选择TypeScript 语法，回车。

11）Visual Studio Code 安装插件vite

12）运行项目，点击底部 vite 按钮（如果无法启动，重新启动该项目）

快速创建vue3 项目工程

1）创建文件夹

2）将刚创建的文件夹拖入Visual Studio Code打开

3）Visual Studio Code 弹出对话框，选择：是

4）Visual Studio Code 顶部菜单栏，找到 终端 按钮，点击 选择 新建终端 选项。

5）使用命令输入： node -v (  Node.js 版本在16+ )

6）使用命令输入： npm -v

7）使用命令输入 npm create vue@latest  （需要等待几分钟）

8）请求要创建的vue版本结果，输入 y 回车。

9）输入要创建的项目名称

10）输入： 工程名 。回车后是否使用 TypeScript 语法？选择 是，其他一律 否。（后续用的那些功能可以添加）

11）查看下载的工程文件

12）关闭终端窗口，关闭Visual Studio Code。

13）打开 vue3_vite 文件夹，将vue-project 拖入Visual Studio Code打开。

14）打开终端窗口 输入npm install （需要检查是否在对应的目录）

15）安装报错，首先清除npm缓存 npm cache clean --force 试试看能否解决，或者卸载 Node.js重新下载安装。

16）安装继续报错，这次是 npm error network 系列

 （1）设置代理： npm config set proxy false ，（2）npm缓存清理：npm cache verify，（3）安装：npm install

继续报错，网络地址不全，继续解决

（1）输入：npm config get proxy （查查代理状态）

（2）输入：npm config get npm config get https-proxy （查看代理配置）

（3）关闭代理：npm config set proxy false

（4）老规矩清除缓存：npm cache clean --force

（5）关键的来了，添加源地址：npm config set registry http://registry.npm.taobao.org/

淘宝源（推荐）

$ npm config set registry http://registry.npm.taobao.org/

官方源

$ npm config set registry http://registry.npmjs.org/

$ npm config set registry https://registry.npmjs.org/

cnpm 源

$ npm config set registry https://registry.cnpmjs.org/

如果使用 cnpm，注意是否安装了 cnpm，cnpm 走推荐走的也是淘宝源

$ npm install -g cnpm --registry=https://registry.npm.taobao.org/

（6）npm install （等待，完成安装）

17）运行 npm run dev

vue3 + vite +ts 初始工程（示例）

https://download.csdn.net/download/odogroup/89651384

vue3 + ts 初始工程（示例）

https://download.csdn.net/download/odogroup/89651380

車到山前
关注
  • 12
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何创建一个vite+vue3+ts项目（小白必看）
蜗牛~~
06-15 1820
当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的。（2）写好页面之后，我们来创建路由，在 src 路径下新建 router/index.ts。
2024年vite+vue3+ts 手把手教你创建一个vue3项目_vite创建vue3项目(1)，前端架构师必备技术
2301_82244607的博客
05-04 654
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】9、安装element-puls组件库10、安装 Ant Design Vue 组件库11、安装与使用Echarts。
【vue3】Vue3 + Vite 项目搭建
weixin_45034639的博客
01-28 3231
Vue3 + Vite + Vant UI
vue3创建vite项目
最新发布
qq_19688207的博客
07-25 1143
命令行创建：npm create vite@latest vue3-tdly-demo -- --template vue。src文件夹下创建router文件夹，并在该文件夹下创建index.js文件，官网：https://www.axios-http.cn/docs/intro。命令行：npm install vue-router@4 --save。命令行：npm install element-plus --save。官网：https://element-plus.org/zh-CN/
Vue3+Vite 创建项目
chengxuyuan1012的博客
04-20 991
Vue3+Vite 创建项目
vue3+vite创建项目
LZB_1006的博客
04-14 160
第一先下载 npm install -g create-vite-app 第二直接创建项目 create-vite-app projectName 运行项目 cd projectName npm install npm run dev yarn 运行也一样
vue3+vite 项目创建
blair1的专栏
04-12 390
安装完成后，可以打开cmd命令行窗口，执行。
vue3+vite+ts+pinia新建项目（略详细版）
chu_geng的博客
01-11 631
使用 vue3+vite+ts+pinia 从头搭建项目
vite + vue3 + uniapp 项目从零搭建
qq_33365152的博客
07-18 1171
vite + vue3 + uniapp 项目从零搭建、uniapp、微信小程序
vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint
2401_84446882的博客
04-29 1085
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
基于 vite 创建 vue3 全家桶项目（vite + vue3 + tsx + pinia）
youyacoder的博客
09-13 1万+
在src目录下创建store，并在src/store中创建demo.ts文件。该文件中咱们使用的方式实现store。import {
vue3+vite搭建项目
qq_40407998的博客
03-07 3146
vue3+vite搭建项目
【详细步骤】使用Vite创建Vue3项目
HQC66666的博客
05-09 6351
Vite是一个轻量级、运行速度快的前端构建工具，它支持模块热替换（Hot Module Replacement，HMR），可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少，随着开发过程中依赖的增多，需要额外进行配置。Vite不需要以命令的方式安装和卸载，只要安装了npm或yarn，就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。
Vue3 + vite 创建项目
weixin_58032613的博客
02-18 1万+
项目创建 vite的介绍 首先要想使用vite来创建一个vue项目，要把vue脚手架升级成为5.0.1版本，但是有一个很大的缺陷，就是升级过后不会再向下兼容vue2的语法创建项目的方式 脚手架升级为5.0.1版本：cnpm install vue@next 或 yarn global add @vue/cli 安装新版@vue/cli 升级完之后，输入：vue -V 来查看脚手架的版本号 脚手架为5.0.1版本创建项目的语法也变了，原本在4.5.15版本的时候还可以做到向下兼容使用vue cli语法
搭建 vite + vue3 项目
halo1416的博客
01-27 8812
一、介绍 该文章主要通过 vite + vue3 + vue-router4 + vuex4 + Element Plus + axios + mockjs 搭建项目。 二、通过vite创建项目 1. 通过vite创建 vue+ts 项目 **注意：**经过我的测试，使用cnpm create vite时不能自定义项目名称；所以推荐使用 npm 或者 yarn // 创建项目 => vite-test yarn create vite // 进入 vite-test cd vite-test //
搭建vue3+vite工程
pulledup的博客
05-04 2209
如何在本地搭建 Vue3+Vite的构建设置，并允许我们使用 Vue3的工具链。确保你安装了最新版本的node.js。创建的项目将使用基于Vite的工具链。
Vue3+Vite项目搭建
weixin_62918410的博客
01-03 9354
vue3+ts+element-plus项目搭建
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
热门推荐
逆境清醒的博客
03-19 7万+
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、Vite + Vue 项目目录结构 六、Vite.config.ts配置
vue3+vite+mock实现TodoList
03-26
Vue3 框架和 Vite 工具提供了 Mock 的功能，可以在开发过程中模拟接口数据。 首先，创建一个基础的 TodoList 示例工程，包括“添加任务”、“删除任务”和“显示所有任务”等功能。 main.js ```javascript import { createApp } from 'vue' import App from './App.vue' import './index.css' createApp(App).mount('#app') ``` App.vue ```vue <template> <div id="app"> <h1>Todo List</h1> <input v-model="task" placeholder="Type new task here..." /> <button @click="addTask">Add</button> <ul> <li v-for="(item, index) in tasks" :key="index"> {{ item }} <button @click="removeTask(index)">x</button> </li> </ul> </div> </template> <script> export default { setup() { const tasks = vue.reactive([]) const addTask = () => { tasks.push(task.value) task.value = '' } const removeTask = (index) => { tasks.splice(index, 1) } const task = vue.ref('') return { tasks, task, addTask, removeTask, } }, } </script> ``` index.html ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>Todo List</title> </head> <body> <div id="app"></div> <script type="module" src="./main.js"></script> </body> </html> ``` 按照以上代码编写完毕之后，我们开启 Mock 功能，使数据接口的 mock 可以生效。 1.使用 vite-plugin-mock 插件安装 Mock 功能。 ```bash npm install vite-plugin-mock --dev ``` 2.在 vite.config.js 中进行配置。 ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' import { createMockMiddleware } from 'vite-plugin-mock' export default defineConfig({ plugins: [vue(), createMockMiddleware()], resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, }) ``` 3.添加 Mock 数据文件，文件路径为`src/mocks/api/TodoList.js`。 src/mocks/api/TodoList.js ```javascript // Mock data const tasks = [ { id: 1, value: 'Learn Vue 3' }, { id: 2, value: 'Continue working on Todo list' }, { id: 3, value: 'Buy groceries' }, ] // API endpoints export default { 'GET /api/tasks': () => { return tasks }, 'POST /api/tasks': (req) => { const newTask = { id: tasks.length + 1, value: req.body.task, } tasks.push(newTask) return newTask }, 'DELETE /api/tasks/:id': (req) => { const taskId = parseInt(req.params.id) const index = tasks.findIndex((task) => task.id === taskId) if (index !== -1) { tasks.splice(index, 1) } return {} }, } ``` 4.在 main.js 中引入 Mock 数据文件，从而启动 Mock 服务。 main.js ```javascript import { createApp } from 'vue' import App from './App.vue' import './index.css' import '@/mocks' createApp(App).mount('#app') ``` 5.测试是否启动成功。 启动执行`npm run dev`之后，打开浏览器，访问`http://localhost:3000/api/tasks`，可看到我们的 mock 数据。 此时我们对 TodoList 进行的增删改操作也将默认使用我们刚刚配置好的 api/TodoList.js 进行 mock 数据的读写操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值