跳至主要內容

Vue脚手架

Guitar大约 4 分钟

Vue 的脚手架（Vue CLI: Command Line Interface）是 Vue 官方提供的标准化开发平台。它可以将我们 .vue 的 代码进行编译生成 html css js 代码，并且可以将这些代码自动发布到它自带的服务器上，为我们 Vue 的开发提供 了一条龙服务。

脚手架官网地址：https://cli.vuejs.org/zh

注意：Vue CLI 4.x 需要 Node.js v8.9 及以上版本，推荐 v10 以上。

vue-cli 是基于 webpack 前端项目构建工具实现的。

vue-cli的安装

  1. 安装node.js

  2. 配置 npm 镜像：

    npm config set registry https://registry.npm.taobao.org

# 检擦是否设置成功
npm config get registry

  3. 安装脚手架

    npm install -g @vue/cli

# 安装成功后控制台有 vue 命令
vue -version

使用vue-cli创建Vue2工程

# 在当前目录下创建一个项目（自带脚手架、HelloWord案例）
vue create 项目目录名
image-20230606224210493
image-20230606224210493

脚手架环境内置了 webpack loader，从而使得 .vue 的能够进行编译。

vue-cli 在创建 Vue 项目时会使用 webpack 和相应的 loader 来处理 .vue 文件。webpack 的 vue-loader 可以将 .vue 文件中的模板、样式和脚本提取出来并分别进行处理，最后再组装成一个 JavaScript 模块。

运行 vue

在项目根路径下执行命令：

npm run serve
  • 会按找规定的文件目录进行项目解析，并在内置的服务器上。

脚手架项目的结构

image-20230606224718419
image-20230606224718419

package.json：包的说明书（包的名字，包的版本，依赖哪些库）。该文件里有 webpack 的短命令：

  1. serve（启动内置服务器）
  2. build 命令是最后一次的编译，生成 html css js，给后端人员
  3. lint 做语法检查的。
{
    // ...
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    }
    // ...
}

index.html：

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <!-- 让IE浏览器启用最高渲染标准。IE8是不支持Vue的。 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 开启移动端虚拟窗口（理想视口） -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!-- 设置页签图标 -->
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <!-- 设置标题 -->
        <title>欢迎使用本系统</title>
    </head>
    <body>
        <!-- 当浏览器不支持JS语言的时候，显示如下的提示信息。 -->
        <noscript>
            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <!-- 容器 -->
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

  • 脚手架环境中，vue.js、 main.js 都会自动引入（根据配置文件），故不要随意更改 main.js 文件名或文件位置。

  • <%= %> 是仿 jsp 的语法表达，用以从配置文件中读取信息并编入最终放进web容器的html。

vue.config.js：vue相关的配置文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,

    // 保存时是否进行语法检查。true表示检查，false表示不检查。默认值是true。
    lintOnSave : false, // 语法检查不过关就不会进行渲染，而且很严格
    // 配置入口
    pages: {
        index: {
            entry: 'src/main.js', // 变动时需要在这里更改（建议不动）
        }
    }
}

配置文件指引：https://cli.vuejs.org/config/。

使用vue-cli进行开发

  1. 编写index.html页面原型，给出托管的容器

  2. 编写、注册、使用子组件（单文件组件形式）

    .vue 文件放置在 components 目录下（非强制，规范如此）。

  3. 编写App.vue和main.js

    导入必要的依赖、组件等。位置和文件名尽量不动。

    在main.js中创建vm并托管html页面容器。

  4. npm run serve 开发模式运行，支持热重载

main.js 中 vm 配置解析：

// 关闭生产提示信息
Vue.config.productionTip = false

// 创建Vue实例
new Vue({
    el : '#app',
    
    // 您正在使用Vue的仅运行时版本，其中模板编译器不可用。
    // 即：目前使用的vue.js是一个缺失了模板编译器的vue.js文件。
    // 怎么解决，两种方案：
    // 第一种：使用完整版的vue.js： import Vue from 'vue/dist/vue.js'
    // 第二种：使用render函数。
    // 为什么采用缺失模板编译器的vue.js？
    // 目的：减小体积。Vue.js包括两块：Vue的核心 + 模板编译器（模板编译器可能占用vue.js文件体积的三分之一。）
    // 将来程序员使用webpack进行打包处理之后，模板编译器就没有存在的必要了。
    // template : '<h1>render函数</h1>'
    
    // render函数被自动调用
    // 这个函数被调用的时候会自动传过来一个参数：createElement，createElement是一个函数。
    // createElement函数可以用来创建元素
    /* render(createElement){ 
        // 创建了一个div元素
        //return createElement('div', 'render函数')
        return createElement(App)
    } */
    // ES6简写，自动return
    render : h => h(App)

})
Copyright ©2024-present Guitar