VueJS 环境搭建

直接用 <script> 引入方式

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>蝴蝶教程(jc2182.com)</title>
      <script src="vue.min.js"></script>
   </head>
   <body></body>
</html>

转到 VueJS的主页下载>>> 有两个版本可供使用-生产版本和开发版本。未最小化开发版本，而最小化了生产版本，如以下屏幕快照所示。开发版本将在项目开发过程中提供警告和调试模式。

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

使用 CDN 方式

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

<script type="module">
   import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

使用 NPM 方式

对于使用 VueJS 的大规模应用程序，建议使用 npm 软件包进行安装。它带有 Browserify 和 Webpack 以及其他必要的工具，这些工具有助于开发。

在使用 npm 安装的命令之前，你需要先下载安装 nodeJS 下面 Vue CLI 有介绍

以下是使用 npm 方式安装，安装的命令为 npm install vue。

使用 Vue CLI 命令行方式

安装说明：

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 需要 Node.js 8.11.x以上或更高版本 (推荐 12.13.0+)。

下面演示了安装的命令：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

使用命令 vue --version 按下Enter键检查其版本是否正确：

目前安装的版本是最新的 vue/cli 4.0.5

下面演示创建一个 vue 项目步骤如下：

使用命令 vue create hello-world 按下Enter键创建一个目录为 hello-world 的项目

按 ↓ 选择 “Manually select features”手动配置，再按 Enter

选择你需要的配置项，选择完后按Enter键

选择是否使用 history router

Vue-Router 利用了浏览器自身的 hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。

我这里建议选 n 按下Enter键。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。

选 Y 的话需要服务器那边再进行设置。

选择自己喜欢的 css 预处理器，选择完按下Enter键

选择 Eslint 代码验证规则

提供一个插件化的 javascript 代码检测工具，这里选择 ESLint + Prettier 按下Enter键，因为这个使用比较多。

选择什么时候进行代码规则检测

Lint on save // 保存就检测 
Lint and fix on commit // fix和commit时候检查

建议选择保存就检测按下Enter键，等到 commit 的时候，问题可能都已经积累很多了

选择如何存放配置

In dedicated config files // 独立文件放置
In package.json // 放package.json里

建议选择放 package.json 里，按下Enter键。

最后提示选 y 是保存当前配置，按下Enter键等待创建