(一)vue开发环境配置及idea集成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. 手脚架是什么鬼?
    目前理解:就是快速搭建项目框架的东东
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值