【Vue前端开发学习】第1章，Pycharm创建Vue项目

最新推荐文章于 2024-07-12 21:21:42 发布
最新推荐文章于 2024-07-12 21:21:42 发布
阅读量7.6k 收藏 33
点赞数 5
分类专栏： Vue前端框架学习总结 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxxjkk/article/details/114119649
版权

文章目录

前言

  Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

   Vue官网：渐进式JavaScript框架

一、Vue.js的三种安装方式

  参考链接: 《vue.js 三种方式安装(vue-cli)》

二、Pycharm安装Vue插件

  1. 安装Pycharm专业版
    参考链接: 《Pycharm 2020.3.3专业版安装教程》

  2. 安装Vue插件，打开Pycharm，File -> Settings… -> Plugins ，搜索Vue并点击安装，安装后重启Pycharm
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  3. 设置JavaScript，支持Vue语法，File -> Settings… -> Languages & Frameworks -> JavaScript
    在这里插入图片描述

三、Pycharm创建Vue项目

  1. File -> New Project… -> Vue.js ，填写Vue项目创建位置和名称
    在这里插入图片描述

    提示：项目名称不能有大写字母，否则会提示“name can no longer contain capital letters”导致无法创建
    在这里插入图片描述

  2. Vue项目创建成功 ，点击npm serve启动工程在这里插入图片描述
    在这里插入图片描述

野路子攻城狮
关注
  • 5
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
pycharm windows下进行vue的研究学习环境搭建
fqfq123456的专栏
04-25 578
Vue.js（读音 /vjuː/, 类似视图） 是一套制造用户界面的渐进。Vue只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过简单的 API 实现响应组件的数据绑定和组合的视图. 特点 易用：在有HTMLCSSJavaScript的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。 odoo15的前端与其有很多相似与互通，利用学习Vue技术，结合odoo强大...
前端学习第一篇 （idea创建vue项目）
usuyitakumi的博客
09-05 3096
希望博客可以给想要学习前端的，有一点点基础的童鞋们一些帮助。 博客参考了 https://www.jianshu.com/p/9c1d4f8ed068 的文章 1.node.js安装 Node.js是一个Javascript运行环境，对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node.js是一个基于Ch...
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-
在pycharm中开发vue的方法步骤
10-15
主要介绍了在pycharm中开发vue的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
pycharm创建项目、虚拟环境介绍
最新发布
weixin_43698776的博客
07-12 2059
pycharm使用虚拟环境创建项目介绍。
在PyCharm中创建Vue项目
清风
05-05 2926
* 0. 在PyCharm中穿件Vue项目, 需要先安装Vue.js的插件 完成安装之后重启PyCharm * 1. 在Python中新建Vue.js项目 * 2. 创建的项目时提示 不要使用大写的字母作为项目名! * 3. 等待下载解释器
Vue进阶：得心应手的开发体验-基于Pycharm的Vue3项目构建与开发环境搭建
SteveRocket's-Blog
10-25 3220
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，是一个基于MVVM结构的轻量级框架，非常容易与其它库或已有项目整合。
免费版pycharm创建vue项目
weixin_45728276的博客
05-20 3132
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 启动项
vue2项目搭建全步骤-超级详细
热门推荐
肥晨开发的学习之路
08-10 1万+
出现以下界面，就是成功了12 ( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序。
pycharm新建vue项目文件
qq_37431752的博客
03-09 2187
1.首先安装Node.js 官网：https://nodejs.org/zh-cn/ 1）根据自己电脑型号下载好，我这里是win10,下载了这个型号的。 image.png 2）点击安装，一步下一步最后完成，安装很简单。 3）打开控制命令行程序（CMD）,检查是否正常，如果显示了例如：如下的版本则说明没有问题 2.使用淘宝NPM 镜像 大家都知道国内直接使用npm ...
初识VUE--创建VUE项目
LUmayu的博客
09-05 132
创建VUE项目。需要安装node.js、npm等工具，以及相关配置。 进入创建目录 创建vue项目 安装相关组件 启动项目 vue init webpack hello-vue(项目名字) //进入新项目 cd path //安装相关组件 npm i element-ui -S //安装vue-router npm install vue-router --save-dev //安装模块依赖 npm install //安装sass npm insatll sass-loader node
pycharm 创建vue并实现简易路由功能
andux的专栏
11-30 1019
使用pycharm创建vue项目时，选择vite来创建vue。因为vite是专门针对vue开发的打包框架，以前使用vue-cli来创建vue项目，就是使用的webpack来进行打包的，现在有了vite，就尽量使用vite来创建vue项目。在pycharm中新建项目，选择vite，再在右边模板里，选择vue，这样就是使用最新的vite版本，来创建vue项目了。vue官网上有简易的路由代码。这样不适用路由插件，就实现了路由功能。默认的启动配置，自动填上了运行命令。点击启动，项目就开始运行了。
六十七、Vue-CLI
weixin_68531269的博客
10-30 1297
vue的脚手架：快速帮我们创建出vue的项目。
PyCharm 安装插件Vue
分享我的点点滴滴，在成长路上与你同行！
11-25 2107
PyCharm 安装插件Vue
pycharm创建VUE框架准备工作
weixin_45814059的博客
06-01 706
国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。3，打开CMD，检查是否正常，如果显示了如下则安装正常。后续就可以打开pycharm开始创建VUE框架了。2，点击安装，傻瓜式一步一步最后完成安装。分别输入这两个，有返回版本就代表安装好了。这样就可以使用cnpm命令来安装模块了。1，安装node.js。
win10 安装vue环境及pycharm中编辑vue
sydjcwx
02-27 2681
环境：win10 1. 安装配置nodejs 首先下载好nodejs 官网地址： https://nodejs.org/en/ 下载LTS版， .msi结尾的安装包 双击此安装包，一路点击next，直至安装完成。 默认会安装到 C:\Program Files\nodejs 下，并且会自动添加环境变量。 安装完成之后，进入cmd命令行，输入node -v 和 npm -v，会出现对应的版本号，即为成功。如图： 如果选择默认安装路径，以后下载模块依赖的话也会存到c盘，为避免占用c盘空间，可以进行如下操作：
pycharm创建vue项目
utoui的博客
01-25 3257
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
09-29
安装Vue.js在PyCharm中需要执行以下步骤： 1. 首先，在PyCharm中安装Vue.js插件。打开PyCharm，点击"File" -> "Settings"，在弹出的窗口中选择"Plugins"。在搜索框中输入"Vue.js"，找到Vue.js插件并点击"Install"进行安装。 2. 安装Node.js。在命令行中执行命令"brew install nodejs"来安装Node.js。如果遇到权限错误，请参考错误信息中的解决方案进行修复。 3. 安装淘宝镜像。在命令行中执行命令"npm install -g cnpm --registry=https://registry.npm.taobao.org"来安装淘宝镜像。淘宝镜像是一个国内的npm源，安装速度更快。 4. 安装Webpack。在命令行中执行命令"cnpm install webpack -g"来安装Webpack。Webpack是一个用于打包前端资源的工具。 5. 安装Vue脚手架。在命令行中执行命令"cnpm install vue-cli -g"来安装Vue脚手架。Vue脚手架是一个用于快速搭建Vue项目的工具。 6. 创建Vue项目。在命令行中，进入到想要创建Vue项目的目录，然后执行命令"vue init webpack 项目名称"来创建Vue项目。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值