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的主页下载>>> 有两个版本可供使用-生产版本和开发版本。 未最小化开发版本,而最小化了生产版本,如以下屏幕快照所示。 开发版本将在项目开发过程中提供警告和调试模式。
    vue
    直接下载并用 <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 软件包进行安装。它带有 BrowserifyWebpack 以及其他必要的工具,这些工具有助于开发。
    在使用 npm 安装的命令之前,你需要先下载安装 nodeJS 下面 Vue CLI 有介绍
    以下是使用 npm 方式安装,安装的命令为 npm install vue
    npm
  • 使用 Vue CLI 命令行方式

    安装说明:

    关于旧版本
    Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -gyarn 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
    
    cli1
    使用命令 vue --version 按下Enter键检查其版本是否正确:
    cli2
    目前安装的版本是最新的 vue/cli 4.0.5

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

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

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

    cli3

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

    cli3

    选择是否使用 history router

    Vue-Router 利用了浏览器自身的 hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)。
    我这里建议选 n 按下Enter键。这样打包出来丢到服务器上可以直接使用了,后期要用的话,也可以自己再开起来。
    Y 的话需要服务器那边再进行设置。
    cli3

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

    cli3

    选择 Eslint 代码验证规则

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

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

    Lint on save // 保存就检测 
    Lint and fix on commit // fix和commit时候检查
    
    建议选择保存就检测按下Enter键,等到 commit 的时候,问题可能都已经积累很多了
    cli3

    选择如何存放配置

    In dedicated config files // 独立文件放置
    In package.json // 放package.json里
    
    建议选择放 package.json 里,按下Enter键。
    cli3
    最后提示选 y 是保存当前配置,按下Enter键等待创建

    等待创建项目完成

    cli3

    最后执行它给出的命令,可以直接在浏览器访问8080端口

    cli3
    cli3

    vue-cli 生成的目录结构如下

    cli3