MacOS vue项目创建

最新推荐文章于 2024-06-01 14:41:33 发布
最新推荐文章于 2024-06-01 14:41:33 发布
阅读量483 收藏
点赞数
文章标签： vue.js macos 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45198573/article/details/129800738
版权

MacOS vue项目创建

vue3官网

https://cn.vuejs.org/

前置条件

vue项目创建需要使用Vue CLI脚手架
可以看我之前的文章
MacOS Vue CLI脚手架安装

创建vue项目

可以通过右键文件夹，选择“新建位于文件夹位置的终端标签页”在指定文件夹中打开终端（这是为了在指定位置创建vue项目），

然后在终端中输入以下命令并输入密码

sudo vue create {项目名}

我为前端项目取名为sbms_vue，即使用vue create sbms_vue命令

前面两个选项是Vue3和Vue2的默认配置，我们选择第三个自定义配置

在这里插入图片描述

我们选择Babel，Router和Vuex（空格进行选择，enter进行确定）

在这里插入图片描述

选择vue3版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T779LUEe-1679911770259)(简单后台管理系统前后端分离项目说明文档.assets/image-20230316224656399.png)]

输入y使用history mode

在这里插入图片描述
选择package.json

输入n拒绝保存配置

创建成功

在这里插入图片描述

创建成功后，分别输入以下指令以启动项目

cd sbms_vue
npm run serve

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bJZ11wR6-1679911770261)(简单后台管理系统前后端分离项目说明文档.assets/image-20230317104427476.png)]

通过control+c停止项目

通过webstorm启动vue项目

  1. 通过webstorm打开sbms_vue文件夹

  2. 在右上角选择Edit Configurations…
    在这里插入图片描述

  3. 选择npm

在这里插入图片描述

  1. 进行以下配置并Apply

  2. 然后就可以在webstorm的右上角启动vue项目

在这里插入图片描述

1imbo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 安装 vue-cli 脚手架 & 创建 vue 项目
01-06
安装 node.js Windows windows vue vue-cli 安装 macos 前往 node.js 官网下载 MacOS 版然后无脑下一步。安装完成后验证一下。 node -v # 验证 nodejs 版本 npm -v # 验证 npm 版本 切换 npm 为淘宝源。 // 切换到淘宝镜像 npm config set registry https://registry.npm.taobao.org // 验证是否切换到了淘宝镜像 npm info underscore 安装 vue-cli npm install -g @vue/cli # 注意 macos 系统上必
使用Webstorm如何调试Vue代码
qq_63605379的博客
02-28 1030
调试Vue代码
mac系统下搭建Vue开发环境，配置运行Webstorm
qq_25284679的博客
12-15 3055
系统：MacOS 参考： https://www.codenong.com/11025980/ https://my.oschina.net/u/2464371/blog/3039914 一、搭建Vue开发环境 Vue.js是一套构建用户界面的渐进式框架。 1、安装Node.js（附带npm） Node.js就是运行在服务端的 JavaScript。 1.1 官网下载安装Node.js：https://nodejs.org/en/download/ 1.2 设置npm（随NodeJS.
Mac电脑使用webstorm安装vue并创建项目
qq_39536716的博客
06-07 867
检查node.js 以及npm包管理工具是否安装完成node.js 的官网下载安装包 https://nodejs.org/zh-cn/ 一路执行下一步即可。记住安装的位置检查项目的node.js的环境以及npm的环境是否是刚刚下载的 file -> other Setting -> Run configuration Templates for New Projects -> Node.js -> Node interpreter (->npm->Node interpreter + Package ma
如何新建一个vue2项目（超详细哦）
热门推荐
不甜呐的博客
11-05 9万+
如何新建一个vue2项目（超详细哦）
Mac如何搭建Vue项目
大圣归来圣骑士清欢的博客
11-21 1718
将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录）如果没有 node_modules 目录，会在当前执行npm 命令的目录下生成node_modules 目录。assets：一般放置静态资源（一般放置多个组件公用的静态资源）需要注意放置在assets文件夹的静态资源在webpack打包时,会把静态资源当做一个模块打包在js文件里面。npm 的包安装分为本地安装（local），全局安装（global）两种，从命令行来看，差别只是有没有-g而已，比如。
Mac上初次使用vite新建Vue3项目需要注意，自己的错误记录
qq_45989931的博客
09-23 3682
用vite创建一个vue3项目遇到的问题
Mac下安装vue及搭建vue项目
宁宁宁儿的博客
07-28 450
题记：学vue有一段时间了，Mac创建项目不熟悉，终于今天下定决心每日书写一篇学习笔记。1.访问.js官网：https://nodejs.org/en/下载对应安装包。2.安装完成，在终端输入 ：node -v如果返回版本号，代表安装成功。3.安装淘宝镜像至于为何要安装淘宝镜像，因为有帐幕阻挡我们访问npm 的境外网站；好奇心强的朋友可以进行尝试，运气差的要很久、很久、有可能一晚上时间，别问我怎么知道的。废话少说，在终端输入：安装完成输入：npm -v4.安装webpack。
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
11-27
任选一个版本，我测试用的是macOS，所以下载了第二个压缩包 ​ 下载到本地后，解压缩，并且将解压缩后的文件夹复制到以下路径下，其中电脑名称就是你的用户名称。 /Users/{电脑名称}/Library ，并且重命名为Apache...
前端+将vue项目打包为桌面应用+electron学习
04-15
内容概要:Electron是一个开源的框架，用于构建跨平台的桌面应用程序。它是由GitHub开发的，最初是为了构建GitHub的桌面客户端而创建的。...Electron基于Node.js和Chromium的开源项目，它将...用途:将vue项目打包为桌面应用
vue-firebase-startup-kit
03-08
Vue Firebase启动套件 概述 这是一个模板存储库，可以帮助任何级别的...在Firebase控制台中创建您自己的项目，然后创建一个Web App和Firestore并启用电子邮件身份验证。 从Firebase控制台通过copy＆paset firbaseCon
electron框架包vue react前端页面
11-04
嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 ———————————————— 版权声明：...
mac搭建vue项目
qq_60833398的博客
04-15 321
mac的vue项目环境
Mac 搭建Vue CLI 3项目
Say_one的博客
12-19 1255
一、安装Vue CLI3 关于旧版本 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过下列任一命令卸载它。 npm uninstall vue-cli -g OR yarn global remove vue-cli 安装之前先查看node 版本，Vue CLI 需要node.js8.9或更高版本（推荐8.11.0+） 安装Vue CLI npm i...
webstorm中vue语法没有提示,怎么解决?
新博客地址：blog.songchunmin.com
08-06 1万+
webstorm中vue语法没有提示,怎么解决? Mac： preferences>plugin,如果没有vue直接下载就行了； windows： 应该在setting --> plugin；
Webstorm + vue 环境搭建+开发
04-13 2242
首先普及几个概念 node.js node.js 并不是一个 js 框架，千万不要认为node.js是类似jquery的框架。 node.js一种javascript的运行环境，能够使得javascript脱离浏览器运行，类似JVM之于java 从有了nodejs后就催生出一大批用js做后台开发的前端人员 NPM npm （Node Package Manager）是 JavaScript 世界的...
vue开发环境搭建（WebStorm）
Nero__A的博客
03-15 8万+
一、安装Node.js，搭建Vue环境 1、访问Node.js官网（https://nodejs.org/en/download/）进行安装包下载。 2、下载成功之后运行安装程序，进行安装。 如果是用安装程序进行安装，在安装过程中会自动进行Nodejs环境变量的配置，如果是通过其他方式进行安装，可能需要手动配置环境变量。 完成安装后，可以打开命令行，直接使用
webstorm如何添加vue支持
sunshine的博客
12-14 1万+
本人使用的是webstorm2016 2.3版本，结果竟然不支持vue文件，于是经过查找找到了一个方法，亲测可用，非常简单哦。
探索Web前端三大主流框架：React，Angular和Vue.js
最新发布
Kimi2024的博客
06-01 796
其中，React，Angular和Vue.js是最受欢迎的三大主流前端框架，它们分别由Facebook，Google和前Google工程师尤雨溪（Evan You）创建。总的来说，React，Angular和Vue.js各有其独特的优势和特点，选择哪个框架取决于项目的具体需求和开发团队的偏好。不过，无论选择哪个框架，都可以确信，你将站在一个坚实的基础之上，构建出高性能，响应式的Web应用。Angular是一个由Google维护的开源Web应用框架，它提供了一个完整且丰富的功能集，用于构建跨平台的应用。
jenkins部署vue项目
03-29
4. 创建Jenkins构建任务：在Jenkins中创建一个新的构建任务，用于构建和部署Vue.js项目。 - 在Jenkins主页面上，单击“New Item”按钮。 - 输入任务名称，并选择“Freestyle project”。 - 在“Source Code ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值