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

文章目录

  • 前言
  • 一、Vue.js的三种安装方式
  • 二、Pycharm安装Vue插件
  • 三、Pycharm创建Vue项目

前言

  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
    【Vue前端开发学习】第1章,Pycharm创建Vue项目_第1张图片
    【Vue前端开发学习】第1章,Pycharm创建Vue项目_第2张图片
    【Vue前端开发学习】第1章,Pycharm创建Vue项目_第3张图片

  3. 设置JavaScript,支持Vue语法,File -> Settings… -> Languages & Frameworks -> JavaScript
    【Vue前端开发学习】第1章,Pycharm创建Vue项目_第4张图片

三、Pycharm创建Vue项目

  1. File -> New Project… -> Vue.js ,填写Vue项目创建位置和名称
    【Vue前端开发学习】第1章,Pycharm创建Vue项目_第5张图片

    提示:项目名称不能有大写字母,否则会提示“name can no longer contain capital letters”导致无法创建
    【Vue前端开发学习】第1章,Pycharm创建Vue项目_第6张图片

  2. Vue项目创建成功 ,点击npm serve启动工程【Vue前端开发学习】第1章,Pycharm创建Vue项目_第7张图片
    【Vue前端开发学习】第1章,Pycharm创建Vue项目_第8张图片

你可能感兴趣的:(Vue前端框架学习总结,vue.js)