mac系统下创建使用vue项目（node.js webpack vue-cli）

最新推荐文章于 2022-08-11 18:04:24 发布
最新推荐文章于 2022-08-11 18:04:24 发布
阅读量421 收藏 2
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45600332/article/details/107758574
版权
本文介绍了在mac系统中如何一步步创建并运行Vue项目。首先，通过访问node.js官网安装node.js，并验证安装是否成功。接着，获取root权限安装webpack。然后，安装vue-cli。最后，通过vue-cli创建基于webpack模板的新项目，运行npm run dev启动项目，当显示特定界面时，表明项目创建完成。
摘要由CSDN通过智能技术生成
1.进入node.js官网安装node.js

在这里插入图片描述

安装成功之后有运行node -v 检查是否安装成功
$ npm -v
4.2.0

2安装webpack
需要先获取roo权限所以现在terminal（终端输入）sudo -s 然后输入密码在

输入如下

$ sudo npm install webpack -g

3安装vue-cli

sudo cnpm  install --global vue-cli

4创建一个基于webpack模版的新项目test：

vue init webpack test

5按照提示一路回车默认到最后出现如下
在这里插入图片描述6 cd进入到 test文件夹下使用npm run dev运行test项目
出现如下这种界面就创建项目完成了

在这里插入图片描述

月亮不说谎！
关注
专栏目录
windows/mac 使用webpack构建vue项目
蹲在人生路上的那只猫
07-03 2686
一、mac环境和windows最大的区别是，windows需要配置环境，有很多坑，基本上node和npm装好了，搭建vue时两者没有很大区别。 二、node.js的配置 A、windwos下 1、去官网下载，https://nodejs.org/en/点击打开链接; 2、安装直接next，在custom setup时，选择npm package manager; 3、安装
mac创建一个基于webpack模板的vue项目报错：-bash: vue: command not found
6块腹肌的博客
05-29 856
报错信息为：-bash: vue: command not found 解决办法： 先全局安装vue-cli：在命令行输入：sudocnpm install --global vue-cli 按提示输入密码即可。 window用户不需要在前面添加sudo指令。 ...
Mac上安装node和使用vue-cli构建vue项目
a787188834的专栏
11-19 343
1、安装node 安装node，可以到Node 官网nodejs.org，或者国内镜像npm.taobao.org/mirrors/node，下载最新版本的安装包。 我使用的国内镜像 镜像列表 7.9.0版本镜像列表 下载后点击安装，安装完成后，命令行执行下面的命令，确认是否安装成功。 andedeMacBook-Pro:workspace andewang$ node -v v7.9.0 andedeMacBook-Pro:workspace andewang$ ps:..
Mac创建第一个IDEA项目Hello World！
weixin_36344134的博客
02-27 1707
首先打开IntelliJ IDEA，创建新项目 在HelloWorld类里编写函数 public static void main(String[] args){ System.out.println(“Hello World!”); } 到此结束，大家继续开启学习之旅吧！ ...
初次尝试在Mac使用vue-cli快速构建vue项目--踩坑记
StoneVivi的博客
12-07 393
初次尝试在Mac使用vue-cli快速构建vue项目–踩坑记 首先介绍一下Vue-cli是Vue官方提供的脚手架工具，默认已经配置好了一套基于webpack管理的Vue项目结构。 官网： https://cli.vuejs.org/zh 由于是踩坑记，这里主要讲的是在搭建过程的踩坑，正常构建可能就不是重点了哈。 1 搭建环境 npm install -g @vue/cli //下载并安装vue-cli vue list // 检测是否安装成功，注意这里不用vue -v来检测 正常的在检测是否成功安装，
vue.config.js完整配置-超详细
最新发布
05-26
这个文件通常位于项目的根目录下，如果使用了 `@vue/cli` 创建的项目，那么在初始化时该文件可能不存在，但可以通过手动创建来添加个性化配置。 **`vue.config.js` 的主要配置选项包括：** 1. **publicPath**： -...
Vue 创建项目后没有 webpack.config.js（vue.config.js） 文件
m0_63853518的博客
08-11 5358
Vue 创建项目后没有 webpack.config.js（vue.config.js） 文件
vue/cli4 项目中配置webpack-bundle-analyzer分析包插件，查找需要优化的文件
weixin_45397318的博客
10-11 1557
@vue/cli 4 项目中安装 webpack-bundle-analyzer 分析包，来查找需要优化的文件1、安装2、修改 vue.config.js和 package.json3、运行分析包 在安装 webpack-bundle-analyzer 分析包之前，在项目中可以通过 npm list vue 查看项目所使用的 @vue 版本以及运行 vue -V 查看项目所使用的 @vue/cli 版本。 1、安装 webpack-bundle-analyzer 可视化资源分析工具可以直观地分析打包出的
详解vue-cli脚手架中webpack配置方法
12-03
Vue CLI 是 Vue.js 的命令行工具，用于快速搭建基于 Vue.js 的项目。它集成了许多配置，包括 Webpack。Webpack 是一个强大的模块打包工具，它能够处理 JavaScript、CSS、图片等静态资源，将它们打包成优化过的静态...
Mac下vue开发环境的搭建步骤以及新建项目
Auto
05-01 5241
文章目录Vue#1 环境#2 开始#2.1 安装nodejs#2.2 安装npm#2.3 安装webpack#2.4 安装vue脚手架#2.5 检查安装是否成功#2.6 创建vue项目#2.7 启动项目 Vue #1 环境 Mac #2 开始 #2.1 安装nodejs brew install nodejs # Mac安装有Homebrew #2.2 安装npm npm install -g...
mac系统webpack搭建vue问题
璐璐璐
06-12 1185
查看npm版本 npm -v 查看node版本 node -v 删除webpack npm uninstall -g webpack 删除webpack-cli npm uninstall -g webpack-cli mac安装webpack sudo npm install webpack -g 一定要使用sudo会让你输入密码 mac安装webpack-cli 注意： webpack 4X 后需要安装webpack-cli输入如下指令进行安装： sudo npm install webpack-
Mac创建一个vue项目
qq_43819817的博客
03-19 3223
首先需要下载vue创建工具 在终端执行 sudo npm install -g @vue/cli 输入密码开始下载，下载成功后，执行 vue --version 可以看到当前版本。 打开Visual Studio Code 的欢迎界面,选择打开文件夹，选择要存放项目的文件夹，然后选择菜单栏的terminal ,选择 new terminal 。在界面下方的终端内输入 vue create hello-world 选择自己的项目相关属性，创建成功后执行 cd hello-word npm run ser
mac系统创建Vue项目
qq_42550235的博客
10-24 4791
注意事项： 需要在terminal (终端) 内输入 sudo -s 进入 root 权限，然后输入密码。 一、在官网下载Mac版本的node.js 安装好后，运行。 $ npm -v v12.10.0 检查是否安装成功。 二、安装webpack (这里必须是在root目录下才能安装成功) $ sudo npm install webpack -g 三、安装vue-cli $ sudo c...
Mac中利用VSCode开发并搭建Vue项目
st646889325的博客
01-26 3197
（一）部署Node环境 （1）下载适合Mac环境的Node包，点击进入下载页面http://nodejs.cn/download/ （2）安装Node环境：找到下载好的Node包，这里是node-v12.14.1.pkg，我们双击它，会进入Node.js安装器界面，如下图所示： 我们只要一直点击继续按钮即可，采用默认设置，安装成功后最终的效果图如下图所示： 默认是安装了npm，我们可以在终端中输入node -v和npm -v命令，分别查看node和npm的版本是多少，若Node安装成功后在终端只会输出版
mac+vue-cli+webpack新建项目
Zhang_SL1112的博客
05-14 872
前提：mac系统，全局安装好vue-cli,安装好淘宝镜像cnpm利用终端来新建项目1. 利用cd命令进入项目想要放置的位置，如： $ cd VueProjects2. vue init webpack project_forlder_name    如：$ vue init webpack vue-pj13. cd project_folder_name    如：$ cd vue-pj14. ...
mac下vue的搭建步骤及新建项目
qq_40926658的博客
01-17 2817
mac下vue的搭建步骤及新建项目 1. 搭建vue环境 安装node.js（在终端输入）： brew install nodejs 或者直接官网手动安装；brew install nodejs 或者直接官网手动安装； node-v 查看node版本 安装npm（在终端输入）： npm install -g cnpm --registry=https://registry.npm.taob...
快速搭建Vue.js项目：vue-cli与Webpack详解
"使用vue-cli脚手架工具搭建vue-webpack项目是一种高效且便捷的方法，尤其适合于大型和需要长期维护的Vue.js应用。它解决了手动配置复杂工具链的问题，如模块化、转译、预处理器、热加载、静态检测和自动化测试等，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值