项目实训六

Vue CLI脚手架

脚手架文件结构：

.文件目录
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

代码示例：/Components/func/vue：

<div class="esign" v-show="!isMobile">
    <!-- 标题 -->
    <h1 style="color: #fff2d4">图片公式识别</h1>
    <!-- 输入区域-开始 -->
    <div class="in">
      <div class="in-title">
        <span style="margin: 0 20px"> 输入区域：</span>
      </div>
      <div class="in-con">
        <!-- 手绘板功能区-开始 -->
        <div class="flex-box">
          <div style="width: 80%">
            <div class="in-tools">
              <div>

vue.js 与 vue.runtime.xxx.js的区别：

vue.js 是完整版的 Vue，包含：核心功能+模板解析器
vue.runtime.xxx.js 是运行版的 Vue，只包含核心功能，没有模板解析器
因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render函数接收到的createElement 函数去指定具体内容

vue画笔设置

              <div>
                画笔粗细：<el-select v-model="lineWidth" placeholder="6" size="large" @change="changeWidth">
                  <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value" />
                </el-select>
              </div>
              <div>画笔颜色：
                <el-color-picker v-model="lineColor" @change="changeColor" />
              </div>
              <div>
                <el-radio-group v-model="penType" @change="onChangePenType">
                  <el-radio-button label="画笔" />
                  <el-radio-button label="橡皮" />
                </el-radio-group>
              </div>

修改默认配置

• vue.config.js 是一个可选的配置文件，如果项目的（和 package.json 同级的）根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载
• 使用 vue.config.js 可以对脚手架进行个性化定制

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