在PyCharm中集成Vue开发

最新推荐文章于 2023-12-10 22:44:30 发布
最新推荐文章于 2023-12-10 22:44:30 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： 前端工具 文章标签： pycharm 集成
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mystonelxj/article/details/114086508
版权
前端工具 专栏收录该内容
8 篇文章 16 订阅 ¥39.90 ¥99.00
订阅专栏
本文介绍了如何在PyCharm中集成Vue.js进行前端开发。首先，讨论了为何选择PyCharm进行全栈开发，并指出社区版与专业版的区别。接着，详细说明了在专业版PyCharm中安装Vue.js插件的步骤。然后，阐述了配置npm、cnpm和Vue-cli的过程，以及版本匹配的重要性。最后，展示了成功集成Vue.js后的项目结构。
摘要由CSDN通过智能技术生成

在PyCharm中集成Vue开发

出发点

Vue是目前国内较为流行前端开发工具。
Python是目前较为热门的开发语言。
如果进行全栈开发，有多种开发形式，其中一种就是前端用Vue，后端用Python，通过PyCharm来达到建立全栈项目管理的目标。

版本选择

默认情况下PyCharm是支持Python开发的，如果需要做相应的Vue开发，需要选择特定的PyCharm版本。目前，在官方PyCharm的地址https://www.jetbrains.com/pycharm/download/#section=windows 有两个版本
在这里插入图片描述
其中社区版安装完成后会显示类似如下效果：
在这里插入图片描述
专业版安装完成后会显示类似如下效果：

了解本专栏 订阅专栏 解锁全文
mystonelxj
关注
专栏目录
订阅专栏
在pycharm中开发vue的方法步骤
11-21
一.在pycharm中开发vue ''' webstorm(vue) pycharm(python) goland(Go语言) idea(java) andrioStuidio(安卓) Php(PHP) ''' ''' ①在pycharm中打开vue项目,在settins下Plugins中下载vue.js ②启动vue项目 -方法1.在Terminal下输入npm run serve -方法2.Edit Configurations----》点+ 选npm-----》在script对应的框中写：serve ''' 二.vue项目的目录结构 -node_modules：项目的依赖 -p
pycharm新建Vue项目
weixin_30892763的博客
07-15 1698
1.首先安装Node.js 官网：https://nodejs.org/zh-cn/ 1）根据自己电脑型号下载好 2）点击安装，傻瓜式一步一步最后完成安装 3）打开CMD，检查是否正常，如果显示了如下则安装正常 2.使用淘宝NPM镜像 大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 npm install -g cnpm ...
Vue进阶：得心应手的开发体验-基于Pycharm的Vue3项目构建与开发环境搭建
SteveRocket's-Blog
10-25 3492
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，是一个基于MVVM结构的轻量级框架，非常容易与其它库或已有项目整合。
免费版pycharm创建vue项目
weixin_45728276的博客
05-20 3199
1.创建好项目后，在根目录检查node和npm是否安装，直接在terminal输入node和npm看是否出现对应的版本，如果有就省略，没有就自行百度下载 2.再terminal安装vue-cli cnpm install vue-cli -g 3.在pycharm安装vue：file-settings中Plugin安装vue.js 4.重启pycharm，创建vue项目，注意项目名称不能有大写字母 vue create vueproject 5.创建完成后，输入 npm run serve 启动项
pycharm创建vue文件
zxcvbbnn的博客
07-23 2728
目录1.首先安装Node.js2.使用淘宝NPM 镜像3.项目初始化1.第一步：继续在cmd中安装vue-cli2.打开pycharm如果这一步报错，没有出现vue.js, 1.首先安装Node.js 1、官网：https://nodejs.org/zh-cn/ 2、点击next，傻瓜式安装 3、打开cmd， 检查一下，出现以上的版本号表示正常（第一个是八以上的就可以，第二个是6以上的就可以） 如果这一步出错，可能是环境没有配置好，去配置一下环境 2.使用淘宝NPM 镜像 在cmd中输入 npm ins
Vue-CLI 项目在pycharm中配置方法
12-09
- 在使用PyCharm进行前端开发时，可能不如专门的前端IDE如Visual Studio Code或WebStorm那样顺手，但PyCharm的集成特性使其在处理混合型项目（如Django + Vue.js）时有一定的优势。 - 遇到问题时，可以查看Vue-CLI和...
pycharm创建vue项目
utoui的博客
01-25 3271
pycharm创建vue项目 学习vue 需要下载node.js 链接: node.js 安装淘宝npm镜像 命令行输入： npm install -g cnpm --registry=https://registry.npm.taobao.org 项目初始化 第一步：安装vue-cli，在命令提示符中输入 cnpm install vue-cli -g 第二步：在pycharm的settings中Plugin安装vue.js 第三步：pycharm重启，创建vue项目 第四步：等待加载完成，运行程序
pycharm新建Vue项目的方法步骤(图文)
12-20
1.首先安装Node.js 官网：https://nodejs.org/zh-cn/ 1）根据自己电脑型号下载好 2）点击安装，傻瓜式一步一步最后完成安装 3）打开CMD，检查是否正常，如果显示了如下则安装正常 2.使用淘宝NPM镜像 大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 npm install -g cnpm --registry=https://registry.npm.taobao.org 这样就可以使用cnpm命令来安装模块了 3.项目初始化 1.第一步：安装vue-cli，在命令提示符中输入 cnpm install vue-
【Vue前端开发学习】第1章，Pycharm创建Vue项目
xxxjkk的博客
02-26 8022
这里写自定义目录标题前言一、Vue.js的三种安装方式二、Pycharm安装Vue插件三、Pycharm创建Vue项目 前言 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 Vue官网：渐进式JavaScript框架 一、Vue.js
pycharm windows下进行vue的研究学习环境搭建
fqfq123456的专栏
04-25 584
Vue.js（读音 /vjuː/, 类似视图） 是一套制造用户界面的渐进。Vue只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过简单的 API 实现响应组件的数据绑定和组合的视图. 特点 易用：在有HTMLCSSJavaScript的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。 odoo15的前端与其有很多相似与互通，利用学习Vue技术，结合odoo强大...
Pycharm配置Vue3环境
m0_74949545的博客
12-10 1094
Pycharm配置Vue项目
python和vue结合开发前端_第十二期 · 「正统」前端开发（上）：了解NPM与Vue开发，并结合PyCharm搭建前端开发环境...
weixin_39624700的博客
12-09 565
本篇概述到现在为止，我们虽然已经初步接触了Vue这样的现代前端技术，但还并不知道如何正确的使用编程工具去编写基于类似技术的前端项目。在本期中，我们将一起更近一步的学习现代前端技术的开发，同时结合我们已经颇为熟悉的PyCharm搭建一个不仅能开发Python项目，还能承担现代前端技术项目开发的「全栈开发环境」。前端简史早期的前端领域里，并没有一门「真正」的程序语言，最早的HTML和CSS等在之前的教...
在PyCharm中创建Vue项目
清风
05-05 2991
* 0. 在PyCharm中穿件Vue项目, 需要先安装Vue.js的插件 完成安装之后重启PyCharm * 1. 在Python中新建Vue.js项目 * 2. 创建的项目时提示 不要使用大写的字母作为项目名! * 3. 等待下载解释器
Pycharm配置支持vue语法
weixin_30478757的博客
07-25 1255
. 2. 3. 4. 5. 转载于:https://www.cnblogs.com/qunxiadexiaoxiangjiao/p/9367748.html
Vue.js入门（四）---用Pycharm创建你的第一个完整的HelloVue
热门推荐
ssjdoudou的博客
10-23 1万+
一、在Pycharm中下载Vue.js插件 二、新建一个Vue.js项目 然后等待安装启动完成，这里提示我要不要用淘宝源，我果断同意啊 三、项目启动 四、项目目录结构 ''' -node_modules：项目的依赖 -public -favicon.ico 网页的图标 -index.html 主页面 -src：我们需要关注的 -asset...
如何创建一个Vue.js项目
qq_37525681的博客
04-12 548
首先列出我们需要的东西：· node.js环境（npm包管理器）·vue-cli脚手架工具·npm镜像
win10 安装vue环境及pycharm中编辑vue
sydjcwx
02-27 2730
环境：win10 1. 安装配置nodejs 首先下载好nodejs 官网地址： https://nodejs.org/en/ 下载LTS版， .msi结尾的安装包 双击此安装包，一路点击next，直至安装完成。 默认会安装到 C:\Program Files\nodejs 下，并且会自动添加环境变量。 安装完成之后，进入cmd命令行，输入node -v 和 npm -v，会出现对应的版本号，即为成功。如图： 如果选择默认安装路径，以后下载模块依赖的话也会存到c盘，为避免占用c盘空间，可以进行如下操作：
pycharm装vue3
最新发布
03-24
PyCharm是一款功能强大的集成开发环境（IDE），它支持多种编程语言，包括Python和前端开发语言Vue。要在PyCharm中配置Vue3开发环境，可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Node.js和npm（Node.js的包管理器）。你可以在Node.js的官方网站上下载并安装最新版本的Node.js。 2. 打开PyCharm，创建一个新的项目或者打开一个已有的项目。 3. 在PyCharm的顶部菜单栏中，选择"File"（文件）-> "Settings"（设置）。 4. 在弹出的窗口中，选择"Languages & Frameworks"（语言和框架）-> "JavaScript"。 5. 在右侧的面板中，点击"Enable"（启用）按钮来启用JavaScript支持。 6. 在左侧的面板中，选择"JavaScript" -> "Libraries"（库）。 7. 点击右侧面板中的"+"按钮来添加一个新的JavaScript库。 8. 在弹出的窗口中，选择"Download"（下载）选项卡。 9. 在搜索框中输入"vue"，然后选择"vue"库并点击"Download and Install"（下载并安装）按钮。 10. 安装完成后，点击"OK"按钮关闭设置窗口。 现在，你已经成功配置了Vue3开发环境。你可以在PyCharm中创建Vue项目，并使用Vue3的语法进行开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

mystonelxj

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

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

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

打赏作者

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

抵扣说明：

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

余额充值