从零开始搭建Vue3.0项目

最新推荐文章于 2024-10-17 22:25:10 发布
最新推荐文章于 2024-10-17 22:25:10 发布
阅读量1.4k 收藏 7
点赞数 1
分类专栏： 前端 文章标签： npm vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zan_Z/article/details/128327161
版权
本文详细介绍了从零开始搭建Vue3.0项目的过程，包括确保Node.js和npm的安装，使用cnpm替代npm解决下载问题，以及通过Vue-cli进行项目创建，详细讲解了每个配置选项的选择，如Vue版本、装饰器、路由、预处理器等，最后指导如何启动项目。
摘要由CSDN通过智能技术生成

从零开始搭建Vue3.0项目

所使用的软件及工具，环境

软件vscode： vscode地址下载，
svn集中式管理： 是一个开源的代码版本控制系统，用于多人共同开发同一个项目，达到资源共用目的工具。svn，
环境搭建：安装node环境

1.确保本机已安装nodejs和npm

  1. Node.js 官方网站下载： 下载安装包；

  2. 选择操作系统对应的包，按步骤傻瓜式安装好即可在这里插入图片描述

  3. win+R 输入cmd 回车 输入node -v 回车，出现版本号就代表安装成功
    在这里插入图片描述

  4. 安装镜像 （注意：两者都只是包管理器，可随便选择）

    NPM（Node Package Manager，节点包管理器）是NodeJS的包管理器，用于节点插件的管理（包括安装，卸载和管理依赖等）。NPM是随同新版的NodeJS一起安装的包管理工具，所以安装Node后可以直接使用npm完成接下来操作。

    NMP安装插件是从NPM官网下载对应的插件包，该网站的服务器在国外，经常会出现下载缓慢或出现异常，这时便需要找到另外的方法提供稳定的下载，这个方法就是CNPM。阿里巴巴的淘宝团队把插件都同步到了在中国的服务器，提供给我们从这个服务器上稳定下载资源。

    输入：npm install -g cnpm –registry=https://registry.npm.taobao.org在这里插入图片描述输入：cnpm -v (检测是否安装成功)。 在这里插入图片描述
    cnpm的用法和npm的用法一致，只是在执行命令的时候将npm改为cnpm。之后就可以使用cnpm执行命令

2.Vue-cli项目搭建

  1. 安装全局vue-cli脚手架 ：npm镜像安装完成之后，接下来安装全局vue-cli脚手架。进入cmd，输入命令： cnpm install --global vue-cli 回车。
    输入 cnpm i @vue/cli -g 会全局安装vue-cli最新版
    在这里插入图片描述

  2. **创建新项目 **：脚手架搭建完成之后，接下来创建一个新项目。 打开cmd通过 cd 文件夹，到你想存项目的文件夹中输入命令 ：vue create project01，（project01为项目名称）那么项目在创建后会直接在新建的文件夹中。
    在这里插入图片描述
    细节操作如下：
    Defaule 是自定义配置后保存好的模板；
    default 是使用默认配置安装
    Manually select features 是自定义配置安装
    在这里插入图片描述
    选择Manually select features后，默认会帮你选择三个可以手动选择和取消配置（通过空格选择/取消）
    在这里插入图片描述
    在这里插入图片描述
    选择完后直接enter，然后会提示你选择对应功能的具体工具包，选择自己擅长或者使用广泛的，简介如下：
    1. 选择Vue.JS的版本，这里选择3.x版本
    在这里插入图片描述
    2.是否使用Class风格装饰器？这里选择yes
    在这里插入图片描述
    3.是否使用Babel与TypeScript一起用于自动检测的填充？这里选择yes
    在这里插入图片描述4. 路由模式是否需要？这里选择yes
    在这里插入图片描述
    5.选择CSS 预处理器？这里看个人需求，我选择Sass/SCSS (with dart-sass)
    在这里插入图片描述
    在这里插入图片描述
    6.代码格式化检测，如果用typescript可以选择TSLint，其他看自己需求？这里选择ESLint + Prettier正常模式
    在这里插入图片描述
    在这里插入图片描述
    7.选择语法检查方式？这里选择选择语法检查方式，这里我选择Lint on save保存就检测
    在这里插入图片描述
    在这里插入图片描述
    8.选择单元测试？这里选择Mocha + Chai
    在这里插入图片描述
    9.e2e测试:？这里选择Cypress (Chrome only)
    在这里插入图片描述
    10.把babel,postcss,eslint这些配置文件放哪?这里选择In dedicated config files放独立文件夹
    在这里插入图片描述
    在这里插入图片描述
    11.是否保存此次配置？我选择no。键入N不记录，如果键入Y需要输入保存名字，如第一步所看到的自定义配置后保存好的模板
    在这里插入图片描述
    等待下载依赖模块
    装好后通过cd进入项目的根目录，根据提示启动即可
    vue2.0 默认启动文件： npm run dev
    Vue3.0+ 默认启动文件： npm run serve

Zan^Z
关注
专栏目录
vue 3.0项目搭建部署
weixin_45102071的博客
04-27 989
关于 VUE3.0 项目搭建部署及码云仓库代码管理详细步骤 1、下载 Git 2、打开 Git bash 3、cd 项目要安装的文件夹 cd d: 4、vue create web ---- “web 是项目文件名称” 5、接下来是一些配置项目 A、 1、default（babel，eslint） ----- 默认设置，快速创建项目原型，没有带任何辅助功能的 npm包 2、Manually select features ----- 自定义配置，提供可选功能的 npm 包 *这里我们选择此选项
Vite2+Vue3学习笔记（一）：Vue3.0项目搭建及配置过程
老司机的后备箱
08-19 660
主题 | Element Plus/* 只需要重写你需要的即可 */);// 如果只是按需导入，则可以忽略以下内容。// 如果你想导入所有样式:【必需】注意：一定要在element-plus的index.css后面引入，否则自定义样式文件不会生效。// 引入Element Plus// 引入自定义样式文件。
vue3.0项目搭建全过程
qq_35776479的博客
04-28 4853
vue3.0项目搭建
使用npm安装Vue3教程
最新发布
weixin_42704604的博客
10-17 1216
例如在：D:\softtools\workspace\workspace_vue 目录下创建一个项目vueproject，先切换到workspace_vue目录，再执行创建命令，如下。4.5.1 在当前cmd命令窗口，执行 cd vueprojecct进行目录的切换，然后 执行 npm run serve 启动项目。2.1.2 这里的-g是指安装到global全局目录去(安装到global下，即node_global目录中）我的地址是（我是在在node里面直接安装的vue -cli）
手把手教你vue3.0项目搭建
热门推荐
weixin_42762167的博客
01-05 1万+
前言：最近公司想重构一个项目，CTO选择了vue3.0 + ant-design-vue技术栈，正好自己也想尝试一下，试着搭建一下，以后有更好的会及时补充修改 注：粗体是命令指令，推荐使用cnpm指令，没有安装淘宝镜像的使用npm（淘宝镜像安装指令：npm install -g cnpm --registry=https://registry.npm.taobao.org） 一、vue（3.0）版本的安装 1.先要安装node.js（在这里就不演示怎么安装nodejs,前面的博客有教程） 官网：https:
Vue3.0项目搭建
weixin_42560974的博客
09-14 1015
vue3.0项目搭建
vue3.0搭建项目
String12的博客
06-24 222
vue3.0官方推荐使用vite来搭建项目，执行命令: npm init @vitejs/app vue3.0 cd vue3.0 npm install npm run dev 执行完上面命令项目就已经启动了。 加入vue-router npm install vue-router 因为vue3.0已经采用vite脚手架搭建项目，之前采用webpack搭建项目时候使用的require.context已经不能使用，如果路由文件太多，只能通过import然后合并数组的方式。 ...
【JavaScript源代码】手把手教你搭建vue3.0项目架构.docx
12-29
总结，本文涵盖了从零开始搭建Vue 3.0项目的基本步骤，包括初始化项目、安装路由、配置目录结构、引入UI框架Ant Design Vue以及状态管理和HTTP库。随着Vue 3的不断发展，这些知识将帮助开发者快速构建高效的前端应用...
零基础搭建Vue3.0 webpack工程：从安装到配置详解
本篇教程是针对初级工程师的入门级指南，详细介绍如何从零开始在移动端构建一个基于Vue 3.0的单页面应用，并使用Webpack进行工程管理。整个过程将逐步引导读者设置环境、安装必要的依赖，以及配置基本的开发工具和...
Vue 3.0 项目搭建
奕初
06-20 339
Vue 3.0 项目初始化 第一步，安装 vue-cli： npm install -g @vue/cli 安装成功后，我们即可使用 vue 命令，测试方法： vue -V 第二步，初始化 vue 项目： vue create vue-test 随后我们勾选：Router、Vuex、CSS Pre-processors 和 Linter / Formatter，这些项目必须的插件依赖后进入项目进行升级。 升级 Vue 3.0 项目 目前创建 Vue 3.0 项目需要通过插件升级的方式来实现，vue-
vue3.0项目的搭建
qq_45079530的博客
01-05 1069
vue3.0项目的搭建
VUE 3.0 项目搭建
M的博客
11-02 702
这篇文章主要介绍下vue-cli3.0项目搭建，项目结构和配置等整理一下，分享给大家。 一、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 ins
vue3.0项目搭建
LiAly66的博客
03-14 414
vue3.0项目搭建
vue3.0项目快速搭建
前端_李嘉豪
12-20 1940
如何搭建一个vue3.0基础项目？ 一、我们要确保vue/cli版本在4.5.0以上，才能更好的支持3.0 //安装最新vue/cli yarn global add @vue/cli //或 npm install -g @vue/cli 用vue -V查看安装的版本号检验是都成功安装。 二、通过vue/cli3创建我们的第一个项目 vue create your-project ? Please pick a preset: (Use arrow keys) default (babel
vue3.0搭建
qq_24241631的博客
02-13 1621
vue搭建 1 安装nodejs 百度自己下载https://nodejs.org/en/ cmd操作 2 安装cnpm（淘宝国内加速） npm install -g cnpm --registry=https://registry.npm.taobao.org 3 安装vue工具包 cnpm install -g @vue/cli 4 创建项目（cmd到自己项目想产生的位置） vue ...
vue3.0以后项目的搭建
qq_39704803的博客
08-28 338
node、vue、vue-cli的安装参考https://blog.csdn.net/qq_39704803/article/details/108030800 到第7步建立vue项目时，改用以下命令新建项目 vue create 项目名 你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。一路回车，然后就会在当前目录新建了一个“项目名 ”的目录，里面有基本的VUE文件。 1.运行 npm
Vue-cli 3.0快速搭建Vue项目指南：从零开始
本文将详细介绍如何使用Vue-cli 3.0来搭建Vue前端项目，这是一款官方推荐的Vue.js项目构建工具，能简化开发流程并提供一系列配置选项。以下是搭建过程中的关键步骤： 1. **环境准备**： - 首先确保安装Node.js，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值