【vue项目搭建】

原创 已于 2025-01-23 10:23:59 修改 · 1.5k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2025-01-21 22:41:10 首次发布

使用vue create 方式搭建vue项目

使用vue create 方式搭建vue项目

查看nodejs版本和vue脚手架版本

使用一下命令，检查你的nodejs和vue脚手架版本，如果没有安装，需要先安装之后再来进行vue项目搭建

node -v

vue --version
或者
vue -V

在这里插入图片描述

创建vue项目

vue create test

在这里插入图片描述
通过上下键进行选择，我这里选择的是手动自定义搭建，上面两个分别是快速搭建vue3和快速搭建vue2
回车进入下一步

在这里插入图片描述
通过上下键进行选择，空格键进行选中
Router：路由；Vuex：vuex状态管理
回车进入下一步

在这里插入图片描述
选则vue的版本，我这里选择的是2.x
回车进入下一步

在这里插入图片描述
使用router路由的history模式或者hash模式，我这里输入的y，也就是选用history模式，（如果使用hash,则输入n）
回车进入下一步

在这里插入图片描述
代码语法错误检查，我选择的是 ESLint + Standard config，这个是标准的
回车进入下一步

在这里插入图片描述
选择代码语法检验的时机，我选择的是Lint on save，保存时检验
回车进入下一步

在这里插入图片描述
选择第三方配置文件保存的方式
我这里选择的时In package.json，存在package.json文件中
回车进入下一步

在这里插入图片描述
是否保存本次配置为预设项目模板，我这里选择N，然后回车，等待项目搭建成功
也可以选择Y，这样下次可以直接使用该配置方案快速搭建项目)

在这里插入图片描述
到了这一步，恭喜你，项目搭建成功了

项目运行

cd test

在这里插入图片描述
运行项目

npm run serve

在这里插入图片描述
在这里插入图片描述

补充

在这里插入图片描述
这就是前面提到的package.json文件

觉得有用就收藏起来吧，别忘了点个关注哦

创建一个vue项目
dreams_dream的博客
07-27 1万+
创建一个vue3项目
vue项目搭建
01-08
二、vue-cil 搭建项目 1、全局安装vue-cil : npm install -g vue-cli 2、项目初始化： 若vue非命令，则需要配置下环境变量（去网上搜一下vue环境变量配置，这里不做解答） 3、项目安装依赖包：cnpm i 4、项目运行...
【vue create】一.使用vue creat搭建项目
????鱼干～
03-08 3658
【vue create】一.使用vue creat搭建项目
创建vue项目步骤
最新发布
hxm_6988的博客
09-23 585
本文介绍了使用Vue CLI创建Vue项目的完整步骤。首先需要全局安装@vue/cli，然后通过vue create命令创建项目，可选择默认配置或手动配置。手动配置时可选择Vue版本、路由模式、ESLint等选项。项目创建完成后，主要目录包括node_modules、src源码目录和public静态资源目录。最后说明了项目运行和打包命令(npm run serve/build)。文章还详细解释了babel和eslint的作用，以及如何将配置保存为模板供下次使用。
VUE 使用 vue create 命令 创建 vue2.0 项目
热门推荐
不想成为可以改变世界的程序员，不是一个好程序员
06-07 2万+
VUE 使用 vue create 命令 创建 vue2.0 项目 为了保证创建过程中避免出现因权限不足的原因 从而 导致创建失败的问题，我们使用 管理员身份 打开命令行 g:表示切换进入G盘 cd git表示打开 当前盘下的 git 文件夹 大家可以根据以上两个命令进入自己想要保存项目的目录下，我这里是保存在 G:\Git 文件夹.........
vue项目安装搭建
Heartbestc的博客
07-30 3480
一、安装node环境 1、下载地址为：https://nodejs.org/en/，如图 下载完成后依次点击安装即可 2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功 输入 node -v 和 npm -v 检查 3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 输入：npm install -g cnpm --registry=ht...
Vue学习笔记集--create-vue
Three_stones的博客
03-25 1726
功能：create-vue 提供了统一的目录结构、本地调试、热部署、单元测试、集成打包等功能，简化了项目的搭建过程，让开发者能够更加专注于业务逻辑的实现。特点：它基于 Vite 构建，具有极速启动服务、快如闪电的热重载等优势，提供了更好的开发体验。这是项目的 HTML 模板文件，所有的 Vue 组件都会被挂载到此文件中的#app元素上。你可以在此文件中添加全局的 HTML 标签、元信息等。这是应用的入口文件。在此文件中，你会创建 Vue 应用实例，并挂载到#app元素上。
vue项目搭建以及全家桶的使用详细教程(小结)
10-17
为了帮助开发者更加高效地进行Vue项目搭建和使用Vue全家桶，本文将详细介绍整个过程，包括Vue官方脚手架vue-cli的使用、项目结构解析、UI框架的引入等核心知识点。 ### Vue项目搭建 首先，对于Vue项目的搭建，推荐...
Vue项目搭建 .xmind
06-28
Vue项目搭建 .xmind
elementUI+vue项目搭建
12-10
"Element UI + Vue 项目搭建"就是一种常见的前端开发方案，它结合了Vue.js这一轻量级、高性能的JavaScript框架和Element UI这一基于Vue的组件库，旨在为开发者提供一套完整的UI解决方案。在这个项目搭建过程中，我们...
requirejs + vue 项目搭建详解
10-19
在项目搭建之前，作者提到了对avalon框架的使用和升级中的问题，以及为什么会转向Vue框架。avalon框架由于升级加入了虚拟DOM后出现了一些不稳定因素，作者开始考虑其他MVVM框架。Vue由于其全面的文档支持、良好的...
VUE2创建项目
csdn_HPL的博客
04-17 5730
模式：URL 中会带有 “#” 符号，如http://example.com/#/home ，“#” 后面的部分是路由的路径，它的改变不会引起页面的重新加载，浏览器会根据 hash 值的变化触发hashchange事件，Vue Router 利用这个特性实现路由跳转。：也是一款流行的 CSS 预处理器，和 Sass 类似，提供变量、混合、嵌套规则等功能，语法简洁，在大型项目中使用可以有效组织和管理 CSS 代码，并且与许多前端框架和构建工具都有良好的集成。：代表 Vue 2 版本。
vue-create 创建 VUE3项目-创建
dayouan的博客
03-30 4967
创建vue3项目流程快捷创建和自定义创建
vue新建一个项目
qq_44004011的博客
03-15 159
1.使用cmd进入项目要创建的目录 在cmd操作中我们需要在不同分区中进行跳转，但我们进入文件夹用的cd命令在分区跳转中失灵了 解决办法：如图第二步 输入E: 就可以跳转了 2.vue create 项目名 3.选择项目配置 因为我安装的是最新版的vue4.5 所以会选择vue.js的版本是2.0还是3.0 最后两步会问你是否需要保存预设并用到以后的项目中，我选择yes，回车下一步 问你保存的preset的名字是什么，我设为testPreset，回车下一步直到安装完成。 成功安装 4.进入项目
创建Vue项目
alinavae的博客
08-06 1263
Vite 本身主要针对现代前端框架（如 Vue 3、React 等）设计，官方并没有提供 Vue 2 的模板。：Vue 官方推荐新项目使用 Vue 3 + Vite，如果必须使用 Vue 2，传统的 Vue CLI 仍是更稳定的选择。：Vue 2 与 Vite 的兼容性不如 Vue 3，部分 Vite 特性（如 HMR 热更新）可能存在轻微差异。使用 Vue UI 创建 Vue 项目是一种可视化的方式，非常适合初学者。，你可以快速搭建一个配置完善的 Vue 3 项目，并且可以根据实际需求灵活选择所需功能。
【Vue】使用create-vue搭建Vue3项目
qq_39921135的博客
06-14 998
create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应。Vue CLI 是用来创建Vue2的。如果是创建Vue3，底层更推荐使用create-vue。由于现在还没有到项目，到项目再具体的去定制化，现在就一律选中No即可，ESLint可以选上。vite是尤大大创建的vue构建工具，并且是市场上非常火爆的。前置条件 - 已安装16.0或更高版本的Node.js。执行如下命令（初始化），这一指令将会安装并执行。使用键盘上的左右键进行切换选择。
【亲测免费】 Vue.js 项目创建工具：create-vue 使用教程
gitblog_00202的博客
10-10 1638
`create-vue` 是 Vue.js 官方推荐的用于快速启动 Vite 驱动的 Vue 项目的脚手架工具。它简化了创建新 Vue 项目的过程，提供了预配置的项目结构，并集成了 Vite 的强大功能，使得开发者能够快速上手并开始开发。 `create-vue` 的主要特点包括： - **基于 Vite**：利用 Vite 的快速启动和热模块替换（HMR）功能，提供极佳的开发体验。 - **预...
VUE的创建
Shootingmemory的博客
04-23 1043
在 setup 函数中，使⽤ reactive 函数，传⼊⼀个 普通对象 ，返回⼀个响应式数据对象。3.setup 中的 this 不指向Vue实例，并且在 setup 中也不会用到 this。• 条件渲染指令（v-show、v-if、v-else、v-else-if）2.在标签中用到的数据或函数，需要在setup函数中声明并返回。指令是 vue 开发中最基础、最常⽤、最简单的知识点。1.vue3特有的，也是vue3代码编写的入口/起点。• 内容渲染指令（v-html、v-text）
创建vue项目
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
01-10 1499
/ JavaScript的超集，包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行。与TypeScript一起使用Babel（现代模式、自动检测的polyfills、传输JSX所需）？（需要为生产中的索引回退进行正确的服务器设置）（是/否）// CSS 预处理器（如：less、sass）// 代码风格检查和格式化（如：ESlint）// vue-router（vue路由）// vuex（vue的状态管理模式）// 单元测试（unit tests）
Vue项目搭建
05-27
好的，下面是搭建Vue项目的步骤： 1. 安装Node.js和npm 首先需要安装Node.js和npm，Node.js是一种基于Chrome V8引擎的JavaScript运行环境，npm是Node.js的包管理器，用于下载和管理项目依赖。 2. 安装Vue CLI Vue CLI是Vue.js官方提供的脚手架工具，用于快速搭建Vue.js项目。 安装命令如下： ``` npm install -g @vue/cli ``` 3. 创建项目 使用Vue CLI创建一个新的Vue项目，在命令行中输入以下命令： ``` vue create <project-name> ``` 其中，`<project-name>`为你的项目名称。 创建完毕后，进入到项目目录中： ``` cd <project-name> ``` 4. 运行项目 在命令行中输入以下命令运行项目： ``` npm run serve ``` 该命令会启动一个开发服务器，并且自动打开浏览器，在浏览器中访问`http://localhost:8080`即可看到项目运行效果。 至此，Vue项目搭建完成。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值