一、vue.js简介

1、何为vue.js

  • Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
  • Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
  • Vue.js是一个MVVM模式的框架，如果读者有angular经验，一定能够很快入门Vue的。
  • vue.js的作者是中国人，吸收了google的angular.js和facebook的react.js的特性，摒弃了jquery传统的DOM操作，采用数据绑定和指令等概念，可以说是未来WEB端开发的趋势。

2、vue.js的特点

  • 易用： 如果已经会了HTML,CSS,JavaScript，现在阅读指南即可开始构建应用。
  • 灵活： 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
  • 高效： 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化。

二、vue.js下载、安装及环境搭建

1、推荐环境配置

  • javascript运行环境：node.js
  • 包管理器：npm/yarn/cnpm (node.js下的包管理器)
  • 集成开发平台：Visual Studio Code ()
  • Vue工程模板：vue-cli (用户生成Vue工程模板)
  • 前端资源加载/打包工具：webpack (它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包)

2、node.js下载及安装

（1）登陆node.js官网https://nodejs.org/en/直接下载。

vue项目中如何调用java的jar包 vuejs.jar_node.js

                   点击左下角的LTS即可下载

（2）下载完成后，傻瓜式安装，一路next

（3）检查安装

         a.打开命令行工具，输入node -v出现下图版本号，就说明安装成功。

node -v

vue项目中如何调用java的jar包 vuejs.jar_vue项目中如何调用java的jar包_02

        b.打开命令行工具，输入npm -v出现下图版本号，就说明安装成功。

npm -v

vue项目中如何调用java的jar包 vuejs.jar_vue项目中如何调用java的jar包_03

3、yarn下载及安装

（1）为什么要安装yarn？

         可参考前端效率神器Yarn的安装和使用（超简单的安装）

（2）yarn的安装

          在已经安装好node.js的条件下，可以直接通过在命令行工具里输入以下语句直接下载及安装yarn。

npm install -g yarn

vue项目中如何调用java的jar包 vuejs.jar_vue项目中如何调用java的jar包_04

（3）查看yarn版本

         完成以上步骤后，在命令行中输入yarn -v可查看是否安装成功及其版本。

yarn -v

vue项目中如何调用java的jar包 vuejs.jar_vue项目中如何调用java的jar包_05

4、安装vue cli(vue脚手架)

（1）vue cli简介

         vue cli是一个“脚手架”，它可以帮助我们快速搭建一个完整的vue应用。vue cli是vue官方提供的构建工具，可用于快速搭建一个带有热重载（在代码修改后不必刷新页面即可呈现修改后的效果）、lint代码语法检测及构建生产版本等功能的单页面应用。

（2）vue cli安装

         在安装Vue CLI之前，需要安装Node.js。
         如果已经全局安装了旧版的vue-cli(1.x或2.x)，需要通过在命令行中输入如下命令进行卸载：

npm uninstall vue-cli –g

vue项目中如何调用java的jar包 vuejs.jar_命令行工具_06

        打开命令行工具，通过如下方式全局安装@vue/cli脚手架，具体命令如下：

npm install -g @vue/cli
# OR（或）
yarn global add @vue/cli

        安装之后，你还可以用这个命令来检查其版本是否正确：

vue --version

        如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli

# 或者

yarn global upgrade --latest @vue/cli

5、cnpm安装及配置

（1）为什么要安装cnpm？

         由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像—cnpm。

（2）安装cnpm

         打开命令行工具，通过如下方式全局安装@vue/cli脚手架，具体命令如下：

npm install -g cnpm --registry=http://registry.npm.taobao.org

（3）备注

         详细卸载及重装指令请查看cnpm卸载与安装步骤

         cnpm中国npm客户端网站中国 npm 镜像的客户端

6、webpack安装及配置

（1）webpack简介

         webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

（2）安装webpack

         在安装 Webpack 前，你本地环境需要支持 node.js。

         由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

         使用 cnpm 安装 webpack：

cnpm install webpack -g

7、Visual Studio Code安装及配置

1、下载链接：https://code.visualstudio.com/

2、安装，一路next

3、安装Chinese (Simplified) Language Pack，vetur和eslint插件。

 

三、创建项目

如出现有如下问题，可以点击如下链接