vue初体验1：新建vue3项目并启动访问（mac）_mac创建vue项目

一、 安装hbuilderx

HBuilderX是一款基于Electron框架开发的跨平台的集成开发环境（IDE），是为前端开发者服务的通用 IDE，或者称为编辑器；提供比其他工具更优秀的 vue 支持。HBuilderX集成了多种开发工具和语言，包括HTML、CSS、JavaScript、TypeScript、Vue.js、React等，可以帮助开发者更高效地进行Web前端开发。

特点
1、可以根据开发者的代码上下文，提供准确的代码补全和语法提示，大大提高了开发效率。
2、集成了多种调试工具和模拟器，可以在不同的设备和浏览器上进行实时调试和预览，有助于更快的定位和解决问题。
3、有多种代码重构和自动化工具，如代码格式化、自动缩进、自动补全等，有助于更规范和高效地编写代码。
4、支持多种版本控制工具，如Git、SVN等，可以方便地管理和协作开发项目。
5、还支持后端开发，它可以集成Node.js和MongoDB等工具，更方便地进行全栈开发。
6、提供多种插件和主题，满足不同开发者需求和喜好。

关于安装 没啥特殊的直接安就行
点我下载进行安装

二、 安装node.js

node.js 平台的默认包管理器为npm。目前 node.js 安装包中包含 npm。通过 npm 可以安装、共享、分发代码，管理项目依赖关系。所以有必要先安装node.js

点我下载安装

nodejs环境配置
安装成功后提示确保/usr/local/bin在$PATH中

所以需要在mac终端中配置全局环境变量

执行cd ~命令，确保切换到根目录

执行vim .bash_profile命令，打开.bash_profile文件

​ 按 i 进入编辑模式，在最后一行加上PATH=$PATH:/usr/local/bin

​ 按 esc 退出编辑模式，并输入:wq保存并退出

执行source .bash_profile命令，使得文件立即生效
1
2
3
4
5
6
7
8
9
10
11
12
13
14

终端查看安装版本：node --version

Node.js 主要模块是用 JavaScript 编写的， Node.js 是一个能够在服务器端运行 JavaScript 的开放源代码、跨平台 JavaScript 运行环境。
两点优势：
（1）跨平台(服务器[操作系统])运行。
（2） Node.js 使前后端更加一体，十分方便。

三、 vue 脚手架

vue脚手架用于自动生成vue和webpack的项目模板。可以快速构建vue的工具，自动安装vue所需要的插件，避免手动安装各种插件，以及寻找各种cdn并一个一个引入的麻烦

1、打开终端，以管理员身份运行：

sudo su 
按提示输入密码（开机运行密码即可）
1
2

2、下载vue的源

通过npm下载vue的源，由于是从国外服务器下载，速度比较慢；所以淘宝团队分享了一个完整的npmjs.org 镜像，我们可以通过执行cnpm加快模块的下载速度。

可通过npm安装cnpm：

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

ps:
npm 的全称是 Node Package Manager，即 Node 包管理器

查看cnpm版本：

cnpm -version
cnpm@9.2.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@9.7.2 (/usr/local/lib/node_modules/cnpm/node_modules/npm/index.js)
node@16.17.0 (/usr/local/bin/node)
npminstall@7.9.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
darwin arm64 21.6.0 
registry=https://registry.npmmirror.com
1
2
3
4
5
6
7
8

3、通过cnpm 安装vue脚手架

cnpm install -g @vue/cli
1

4、启动vue脚手架自带的项目管理器(服务)

执行 vue ui

vue ui 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/446162