vue开发环境配置及idea集成vue

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

以前的工作主要侧重后端的业务逻辑开发，再加上对css,js莫名的不喜欢。所以很少去接触，以前买了本node.js，看起来也是不知道如何下手。今天从搭建项目到正式部署到服务器，整个流程走了一遍，感觉一下子变得通透了很多。

目录

 vue开发环境搭建

项目创建运行命令

IntelliJ IDEA配置VUE开发环境

项目导入idea

项目发布

 vue开发环境搭建

  1. 安装node.js：https://nodejs.org/en/，选择对应的版本下载安装即可。

    安装成功后查看版本确认下是否安装成功：

  2. webpack的安装

    由于vue-cli是基于webpack的，所以我们要在安装一下webpack，命令行输入： npm install webpack -g 

    之后命令行输入：cnpm install vue-cli -g全局下安装

  3. 安装手脚架vue-cli

    安装访问外网会比较慢，所以这里建议下载淘宝镜像，命令行输入：npm install -g cnpm --registry=https://registry.npm.taobao.org。

    之后命令行输入：cnpm install vue-cli -g全局下安装。

注意：在安装过程可能会存在一些警告，是一些版本的问题，可以略过不计

项目创建运行命令

  1. 创建项目 vue init webpack vuecmp

    说明：会在执行命令的目录下直接创建项目

  2. 安装依赖包 cnpm install

  3. 运行项目 cnpm run dev/cnpm start

  4. 打包项目 cnpm run build

IntelliJ IDEA配置VUE开发环境

       上面的几个步骤就已经可以完成vue项目的开发和打包一系列的操作了，方便开发我们一般会使用相关的idea进行开发。我习惯使用intellij idea开发。下面就讲下其配置的几个地方。

  1. 安装插件

  2. 配置js版本

  3. 添加HTML的格式

项目导入idea

  1. 导入项目

  2. 设置运行/打包命令


项目发布

  1. build成功后会生成dist这个文件夹，就是打包后的。直接将这个文件夹放到服务器下就可以进行访问了

一知半解

  1. 在以前的认知里，只有Java代码编译变成了class文件，前端的代码直接复制到服务器就可以访问的，并没有进行编译，为什么VUE还要编译呢？

    目前大概理解：缩小文件大小，加密

  2. 手脚架是什么鬼？

    目前理解：就是快速搭建项目框架的东东

以上是 vue开发环境配置及idea集成vue 的全部内容， 来源链接： utcz.com/z/376253.html

回到顶部