Vue开发环境准备

1. 开发工具

VUE开发环境个人推荐VS code，然后安装特定的插件即可开发，可用的插件如下：

• Vetur —— 语法高亮、智能感知、Emmet等
• EsLint—— 语法纠错
• Auto Close Tag —— 自动闭合HTML/XML标签
• Auto Rename Tag —— 自动完成另一侧标签的同步修改
• Path Intellisense —— 自动路劲补全
• HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
• Vue 2 Snippets ——vue的语法提示

2. vue-cli构建项目与打包部署

使用vue-cli能够快速的帮助我们构建项目，它就如同一个脚手架，提供了可选的模板。在使用vue-cli之前需要先安装nodejs。

2.1 使用npm构建项目

npm install -g @vue/cli             #安装vue-cli,该步骤需要等一段时间
vue -V                              #查看vue-cli的版本
vue create my-app                   #创建名为my-app的项目

2.2 项目的结构介绍

• public：存放静态文件
• src：源码文件，开发就在此目录下
• .gitignore：git的配置文件
• babel.config.js：babel的配置文件，在创建项目的时候采用的脚手架为bable
• package-lock.json：定义了依赖库的下载位置，保证了在项目迁移部署环境的一致性。
• package.json：定义了该项目依赖的类库

2.3 项目的部署运行

    npm run build   打包，将生成的dist目录下的文件放入到tomcat或者nginx下，启动服务器，即可访问。
    npm run serve   启动项目，会自动生成访问端口
    
    注意：npm run XXX是执行配置在 package.json 中的脚本，比如：
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },