Mac搭建vue环境

①、首先安装好node.js和npm https://zhangvalue.blog.youkuaiyun.com/article/details/103264457

②、安装 淘宝镜像 (npm)

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

③、安装webpack

cnpm install webpack -g

④、安装vue脚手架

npm install vue-cli -g

⑤、新建一个文件夹放工程用的,在终端中进入该目录,demo1是自己定义的vue的工程名

vue init webpack-simple demo1

如上图中提示所示:

⑥、cd 命令进入创建的工程目录

cd demo1
  • 注意:最后三步都是要进入到当前工程目录后执行的。

⑦、安装项目依赖(该步骤等待时间比较长)

npm install

⑧、安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

⑨、启动项目

npm run dev

启动成功后浏览器

### 搭建 Vue 3 开发环境的指南 在 Mac搭建 Vue 3 开发环境需要完成几个关键步骤,包括安装 Node.js、npm、Vue CLI 或 Vite 等工具。以下是详细的说明和操作方法。 #### 1. 安装 Homebrew Homebrew 是 Mac 下常用的包管理工具,可以简化软件的安装过程。如果尚未安装 Homebrew,可以通过以下命令进行安装: ```bash /bin/zsh -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ``` 确保 Homebrew 成功安装后,可以运行 `brew -v` 来验证本[^3]。 #### 2. 安装 Node.js 和 npm Node.js 是 Vue 项目运行和构建的基础环境。推荐使用 Homebrew 安装 Node.js,执行以下命令: ```bash brew install node ``` 安装完成后,可以通过以下命令检查本: ```bash node -v npm -v ``` 确保 Node.js 本为 14.x 或更高本,npm 本为 6.x 或更高本[^1]。 #### 3. 使用 Vue CLI 创建 Vue 3 项目 Vue CLI 是官方提供的脚手架工具,用于快速创建 Vue 项目。首先安装 Vue CLI: ```bash npm install -g @vue/cli ``` 然后通过以下命令创建一个新的 Vue 3 项目: ```bash vue create my-vue3-project ``` 在交互式界面中选择 Vue 3 作为默认预设或手动配置项目选项[^4]。 #### 4. 使用 Vite 创建 Vue 3 项目(推荐) Vite 是一种更现代的前端构建工具,相比 Vue CLI 更快、更轻量。首先安装 Vite: ```bash npm install -g create-vite ``` 然后通过以下命令创建一个新的 Vue 3 项目: ```bash create-vite my-vue3-project --template vue ``` 进入项目目录并启动开发服务器: ```bash cd my-vue3-project npm install npm run dev ``` Vite 默认支持 Vue 3,并提供更快的热更新体验[^4]。 #### 5. 安装 WebStorm 并配置插件 WebStorm 是一款强大的前端开发编辑器,适合 Vue 项目的开发。安装 WebStorm 后,建议安装以下插件以提升开发效率: - **Vue.js**:官方支持 Vue 开发。 - **ESLint**:代码质量检查工具。 - **Prettier**:代码格式化工具。 - **Material Theme UI**:美化编辑器主题[^1]。 #### 6. 配置 Proxy(可选) 如果项目需要跨域请求,可以在 `vite.config.js` 或 Vue CLI 的 `vue.config.js` 中配置代理: ```javascript // vite.config.js 示例 export default { server: { proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } }; ``` --- ### 注意事项 - 如果网络较慢,可以配置淘宝镜像源加速 npm 包下载: ```bash npm config set registry https://registry.npmmirror.com ``` - 在安装过程中遇到问题时,可以参考官方文档或社区资源进行排查[^2]。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhangvalue

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值