【Vue】搭建运行Vue的详细教程

SarPro

已于 2024-03-07 21:11:30 修改

阅读量1.6w

点赞数 39

分类专栏： # 工具安装指南文章标签： vscode ide 编辑器 nodejs

于 2023-12-11 02:00:00 首次发布

本文链接：https://blog.csdn.net/m0_57532432/article/details/134644014

版权

工具安装指南专栏收录该内容

17 篇文章

订阅专栏

🌼2.2 安装 Vue 脚手架（Vue CLI）

📖概述

Visual Studio Code（简称VSCode）是由Microsoft开发的一款免费、轻量级、开源的代码编辑器。以下是VSCode的一些主要特点：

跨平台性： VSCode支持Windows、macOS和Linux操作系统，确保开发者在不同平台上享有一致的开发体验。

轻量高效： 作为一款轻量级编辑器，VSCode启动迅速，占用系统资源较少，使得开发者能够快速高效地进行代码编辑和开发工作。

强大的代码编辑功能： 提供智能感知、代码补全、实时错误检测等功能，支持多种编程语言，使得编写和维护代码变得更加容易。

丰富的扩展生态系统： VSCode拥有庞大的扩展市场，开发者可以根据自己的需求安装各种插件，从而定制编辑器以满足特定的开发需求。

集成调试功能： 内置强大的调试器，支持多种语言的调试，使开发者能够轻松地进行代码调试和故障排除。

Git集成： 提供了直观的Git集成，包括版本控制、分支管理等功能，方便开发者协同工作和进行版本管理。

内置终端： 集成了内置终端，使得开发者可以在编辑器中执行命令，而无需切换到外部终端窗口。

主题和自定义性： 提供多种主题选择，同时支持用户定制主题，使得编辑器外观能够满足个性化需求。

VSCode以其轻量高效、丰富的扩展生态系统和强大的代码编辑功能成为一款备受欢迎的代码编辑器。无论是前端开发、后端开发还是其他领域，VSCode都为开发者提供了灵活而强大的工具支持。

🌸1. 下载node.js

第一步：下载安装nodejs

【安装指南】nodejs下载、安装与配置详细教程-CSDN博客

🌸2. 安装环境

🌼2.1 切换镜像源

默认使用国外服务器，npm下载环境很慢。

查看当前镜像源

npm config get registry

切换镜像源下载

阿里云：

npm config set registry https://registry.npm.aliyun.com/

淘宝：

npm config set registry https://registry.npm.taobao.org/

官方：

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

检查是否配置成功，查看当前镜像源

npm config get registry

🌼2.2 安装 Vue 脚手架（Vue CLI）

查看已有的全局安装的所有 Node.js 模块：

npm list -g

目前显示为空【啥环境也没安装哈哈】：

安装 Vue 脚手架（Vue CLI）： 打开命令行全局安装 Vue CLI：

npm install -g @vue/cli

检查安装是否成功

vue -V

安装webpack

npm install webpack -g

记录问题：

问题1：

解决方案：这个错误表明你的npm请求中使用的证书已经过期。
重新设置下【可能有必要，反正用了没坏处哈哈】
npm config set registry http://registry.npm.taobao.org/
更新npm： 确保你的npm版本是最新的。运行以下命令来更新npm：
npm install -g npm
清除npm缓存： 清除npm的缓存有时可以解决证书问题。运行以下命令清除缓存：
npm cache clean -f

🌼2.3 创建 Vue 项目

在对应目录创建新文件夹用来保存vue项目，并且在对应cmd目录下创建新的 Vue项目【以管理员方式运行】

在命令行中，进入需要创建项目的目录，运行以下命令：

vue create vuetest

注意：vue create 创建的项目名称不能包含大写【后续版本可能会改进】

vuetest 是要创建的项目的名称，可以根据需要更改它。在执行这个命令后，Vue CLI 将询问你关于项目的一些配置选项，例如使用预设（Preset）或手动配置。可以选择默认预设，然后根据需要进行自定义。

a. 默认创建

cd到自己创建的项目目录下

cd vuetest

使用运行指令

npm install #拷贝别人项目需要加入
npm run serve

b 自定义创建

按住空格键可以标注

选择vue 2

输入y

查错：选择标准查错

代码检查时机：选择保存时检查

输入n，不将此次选项作为模板使用

cd到自己创建的项目目录下

cd vuetest

使用运行指令

npm install #拷贝别人项目需要加入
npm run serve

🌼2.4 删除vue项目

在Windows系统下使用：

rmdir /s /q your_vue_project

这会删除整个项目文件夹及其内容。

🌼2.5 elementUI

上述步骤在终端Ctrl+C强制中断后，

输入：
npm i element-ui -S
在main.js文件头部加上

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

后续代码加上 Vue.use(ElementUI)

p4.引入elementUI_哔哩哔哩_bilibili

🌼2.6 记录问题

🌟1 显示OPENSSL错误

$env:NODE_OPTIONS="--openssl-legacy-provider" 
或
set NODE_OPTIONS=--openssl-legacy-provider
 
补充:
在终端输入一次只能本次生效，
如果想永久生效可以在 package.json 文件中修改对应的 scripts 节点的内容如下：
 
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",