Vue3.0项目级开发基础

说明

前提：安装node，npm和安装vue

• 说明：本文章主在介绍用组合式api风格（setup()）进行项目级开发

• Vue入门基础：（介绍Vue基础概念）

Vue组件结构

• <template>：编写视图层代码
• <script>：编写控制层和MV层代码
• <style>：编写图层样式

<template>
	<div>
		<!-- 组件代码 -->
	
	</div>

</template>
<script>
    export default {};
</script>
<style>

</style>

（1）<style>

• 说明：图层样式标签中，可配置样式作用域和css预处理器

<!-- ####作用域#### -->
<!-- 全局作用域，可被调用该组件的组件继承样式 -->
<style></style>

<!-- 局部作用域，样式仅作用于当前组件 -->
<style scoped></style>
<!-- 或 -->
<style module></style>


<!-- 样式调用  空格隔开-->

<div class="样式名1 样式名2">
    xxxxx
</div>


<!-- ####配置css预处理器#### -->
<!-- 支持 scss，sass，less等 -->
<style lang="scss"></style>

<!-- ####样式引用#### -->
<!-- @import是stylus的语法 -->
<style>
@import xxxxx.css
</style>

1. 常用模块

模块	说明
vue-router	用于路由跳转
vuex	用于存储管理共享状态
axios	用于请求接收发送，与后端交互
comment	用于将date日期类型格式化
vue-i18n	用于国际化

2. Vue3快速开始

（1）安装

npm -v
node -v

// 安装最新版 3.x版本
npm npm install  @vue/cli -g 

// 大写V
vue -V

（2）项目新建与运行

// 1. 选择新建项目的目录，打开cmd

// 2. 新建项目
vue create <vue-project>

// 3. 开启项目 
// 注意 是 serve 没有 r
cd <vue-project>
npm run serve
// 或 npm run dev // 具体哪种方式由package.json配置文件中scripts属性内容决定（script内可看为运行脚本命令集）

// 4. 访问地址 （以终端显示的地址为准）
Local:   http://localhost:8080/
Network: http://192.168.5.7:8080/  // 有网络穿透,可远程访问。此为访问地址

（3）目录结构

说明：不同版本的vue或脚手架和不同vue项目创建方式的得到的结构一般不同，但总是会有一些固定的核心文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ttlUCe4-1681202759501)(null)]

目录/文件	说明
build	项目构建(webpack)相关代码
public	放公共文件（如 网站logo）
node_modules	npm 加载的项目依赖模块
src	项目开发根目录
src/assets	放置一些静态文件（如 img，css等）
src/components	主页面骨架组件（如：header，sidebar组件）
src/config	配置文件存放目录（如：路由，vuex配置），一般在该目录在新建各自模块的目录，在其内写配置文件
src/test	测试用
src/views	放视图组件（如：login）
src/utils	放一些自己封装的工具
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。（可删）
package.json（核心文件）	项目配置和描述文件。（如：项目名，版本，运行脚本，依赖的模块等）
README.md	项目的说明文档（如：项目运行方式等）
App.vue（核心文件）	根组件，项目运行的默认读取Vue组件（相当于index.html）
main.js（核心文件）	整个项目的入口文件；会创建一个Vue实例，将App.vue组件编译挂载到页面。（相当于Java中的main方法）
package-lock.json（核心文件）	描述 node_modules 文件中所有模块的版本信息，模块来源及依赖的小版本信息等。
vue.config.js（核心文件）	vue配置文件，不配则使用默认值
babel.config.js	文件配置了babel，babel是一个编译器，用来将javascript语法（主要是ES6）编译并生成浏览器兼容的语法（默认是ES5）

（4）Vue配置文件

• 文件名：vue.config.js（不配也可）

module.exports = {
  // 项目部署的基础路径
  // 我们默认假设你的应用将会部署在域名的根部，
  // 比如 https://www.my-app.com/
  // 如果你的应用时部署在一个子路径下，那么你需要在这里
  // 指定子路径。比如，如果你的应用部署在
  // https://www.foobar.com/my-app/
  // 那么将这个值改为 `/my-app/`
  publicPath: '/Reader/dist/',　　/*这个是我存放在github在线预览的Reader项目*/

  // 将构建好的文件输出到哪里（或者说将编译的文件）
  outputDir: 'dist',

  // 放置静态资源的地方 (js/css/img/font/...)
  assetsDir: '',

  // 用于多页配置，默认是 undefined
  pages: {
    index: {
      // 入口文件
      entry: 'src/main.js',　　/*这个是根入口文件*/
      // 模板文件
      template: 'public/index.html',
      // 输出文件
      filename: 'index.html',
      // 页面title
      title: 'Index Page'
    },
    // 简写格式
    // 模板文件默认是 `public/subpage.html`
    // 如果不存在，就是 `public/index.html`.
    // 输出文件默认是 `subpage.html`.
    subpage: 'src/main.js'　　　　/*注意这个是*/
  },

  // 是否在保存的时候使用 `eslint-loader` 进行检查。
  // 有效的值：`ture` | `false` | `"error"`
  // 当设置为 `"error"` 时，检查出的错误会触发编译失败。
  lintOnSave: true,

  // 使用带有浏览器内编译器的完整构建版本
  // 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时
  runtimeCompiler: false,

  // babel-loader 默认会跳过 node_modules 依赖。
  // 通过这个选项可以显式转译一个依赖。
  transpileDependencies: [/* string or regex */],

  // 是否为生产环境构建生成 source map？
  productionSourceMap: true,

  // 调整内部的 webpack 配置。
  // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},

  // CSS 相关选项
  css: {
    // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
    // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
    extract: true,

    // 是否开启 CSS source map？
    sourceMap: false,

    // 为预处理器的 loader 传递自定义选项。比如传递给
    // sass-loader 时，使用 `{ sass: { ... } }`。
    loaderOptions: {},

    // 为所有的 CSS 及其预处理文件开启 CSS Modules。
    // 这个选项不会影响 `*.vue` 文件。
    modules: false
  },

  // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
  // 在多核机器下会默认开启。
  parallel: require('os').cpus().length > 1,

  // PWA 插件的选项。
  // 查阅 https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-pwa
  pwa: {},

  // 配置 webpack-dev-server 行为。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
    proxy: {
          '/api': {
                target: 'http://localhost:8880',
                changeOrigin: true,
                secure: false,
                // ws: true,
                pathRewrite: {
                    '^/api': '/static/mock'   // 请求数据路径别名,这里是注意将static/mock放入public文件夹
                }
          }
   },
   before: app => {}
  },

  // 三方插件的选项
  pluginOptions: {
    // ...
  }
}

3. 风格指南

• 官方风格指南文档：详情

• 说明：针对 Vue 代码的开发风格指南（只总结个人常用的）

（1）规则类别

优先级	描述
优先级A：必要的	这些规则会帮你规避错误，所以请务必学习并遵守它们
优先级B：强烈推荐	这些规则能够在绝大多数工程中改善可读性和开发体验
优先级C：推荐	当存在有多个同样好的选项时，可以选择其中任意一项以确保一致性。在这些规则里，我们描述每个可取的选项，并建议使用一个默认的
优先级D：谨慎使用	某些 Vue 特性的存在是为了照顾极端情况，或帮助老代码平稳迁移。当被过度使用时，这些特性会让代码难以维护，甚至变成 bug 的来源

（2）优先级A

1. 组件名由多单词组成

   （除了根组件（App），以及内置组件（<transition>、<component>））

2. v-for始终配合key使用（key与元素id单向绑定）

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

3. 避免 v-if 和 v-for 使用于同一元素中

   （因v-if优先级比v-for更高）

4. 组件样式<style>要设置作用域

   （全局样式定义于根组件）

（3）优先级B

1. 组件名用大驼峰命名法（首字母也要大写）或横线连接(kebab-case)

2. 基础组件名统一前缀（Base、App、V）

   （基础组件：指展示类的、无逻辑的或无状态的组件（如：button，table，icon））

VueButton.vue
VueTable.vue

3. 单例组件名称用The前缀

   （单例组件：指最多只被每个组件应用一次的组件）

TheHeading.vue
TheSidebar.vue

4. 与父组件紧密耦合的组件名称由父组件做前缀

<!-- 父组件 -->
TodoList.vue
<!-- 子组件 -->
TodoListItem.vue
TodoListButton.vue

5. prop命名，用小驼峰法或横线连接法
6. 多个attribute元素应分行

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

6. 视图层应只包含简单表达式，复杂的逻辑算法应在模型层定义
7. 计算属性应尽可能简单
8. attribute值应始终带引号（单引号或双引号）

<AppSidebar :style="{ width: sidebarWidth + 'px' }">

（4）优先级C

1）组件/实例选项的顺序

1.全局感知 (要求在组件以外被感知)
name

2.模板编译选项 (改变模板编译的方式)
compilerOptions

3.模板依赖 (模板内使用的资源)
components
directives

4.组合 (合并 property 至选项内)
extends
mixins
provide/inject

5.接口 (组件的接口)
inheritAttrs
props
emits
expose

6.组合式 API (使用组合式 API 的入口点)
setup

7.本地状态 (本地的响应式 property)
data
computed

8.事件 (通过响应式事件触发的回调)
watch

9.生命周期事件 (按照它们被调用的顺序)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeUnmount
unmounted
errorCaptured
renderTracked
renderTriggered

10.非响应式的 property (不依赖响应性系统的实例 property)
methods

11.渲染 (组件输出的声明式描述)
template/render

2）元素attribute顺序

1.定义 (提供组件的选项)
is

2.列表渲染 (创建相同元素的多个变体)
v-for

3.条件 (元素是否渲染/显示)
v-if
v-else-if
v-else
v-show
v-cloak

4.渲染修饰符 (改变元素的渲染方式)
v-pre
v-once

5.全局感知 (要求在组件以外被感知)
id

6.唯一性 Attribute (需要唯一值的 attribute)
ref
key

7.双向绑定 (结合了绑定与事件)
v-model

8.其他 Attribute (所有普通的、绑定或未绑定的 attribute)

9.事件 (组件事件监听器)
v-on

10.内容 (覆写元素的内容)
v-html
v-text

（5）优先级D

1. <style>中建议少使用元素选择器，以类选择器为主

   （元素选择器：选择标签的选择器）

<template>
  <button class="btn btn-close">×</button>
</template>

<style scoped>
    <!-- 推荐 -->
    .btn-close {
      background-color: red;
    }
    <!-- 尽量少使用 -->
    button {
        background-color: red;
    }
</style>

4. Sutup和组合式APi

（1） setup函数

• 定义：是Vue实例化中一个可接收props和context的函数，组件创建前调用，是组合式 API 的入口

• 注意：setup中不要使用this（因为他不是得到组件实例），且setup的调用发生在data,computed和methods之前，所以无法被setup获取。不过组合式api也有自己的解决方案

1）ref响应式变量

• 说明：用ref创建的变量，相当于在选项式apidata内定义的变量
• 注意：JavaScript 的 Number 或 String 等基本类型是通过值而非引用方式传递的

import { ref } from 'vue'

const num1 = ref(0)
const num2 = num1;  // 错误，因为JavaScript 的 `Number` 或 `String` 等基本类型是通过值而非引用方式传递的，此种方式创建的num2不是响应式变量
const num2 = ref(num1); //正确

2）setup的return

• 说明：
  • return中任何内容都可以用于组件的其余部分
  • return返回函数，它的行为与将其定义在 methods 选项中的行为相同

import { ref } from 'vue'
export default {
  components: {  },
  setup(props,context) {
  	const num1 = ref(0);
  	const num2 = ref(1);
    const add = (num1,num2)=>( {return num1+num2 });

    return {} // 这里返回的任何内容都可以用于组件的其余部分
  }
  // 组件的“其余部分”
}

3）注册生命周期钩子

说明：与选项式api（vue2.x开发方式）名称相同，但前缀为on（如：onMounted）

import {onMounted } from 'vue'

setup () {
  onMounted(() => {})
  return {}
}

3）引用watch

• 说明：
  • watch相当于选项式api的watch
  • toRefs创建对 props 中的 user property 的响应式引用

import { ref, watch } from 'vue'

const counter = ref(0)
watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})

4）引用computed属性

• 说明：相当于选项式api的computed属性

import { ref, computed } from 'vue'

const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)

counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2

示例

<template>
    <div class="">
        <h1>Hi</h1>
        <input type="button" @click="sum" value="sum">
        num1:<input type="text" v-model="num1"><br>
        num2:<input type="text" v-model="num2"><br>
        result:{{sum}}
    </div>
</template>

<script>
    import { ref } from "vue";
    export default {
        name: "404",
        setup() {
            const num1 = ref(10);
            const num2 = ref(20);

             const sum= ()=>{
                num1 + num2
            }

            return {
                 num1,
                num2,
                sum
            }
        }
    };
</script>


<style scoped>

</style>

（2）组合式Api

在学习使用setup时，你可能已经在问这个问题了——这不就是把代码移到 setup 选项并使它变得非常大吗？嗯，确实是这样的。这就是组合式api出现的原因，我们将一些公用函数（如：数据库搜索引擎）提取到一个独立的组合式函数中，使用时import便可，从而使代码更简洁，且提高了代码复用性

• 说明：是vue3.x的新特性，可以说是一种开发风格
• 目的：提高代码可读性和复用性

1）组合式函数

• 文件名：Sum.js
• 位置：src/utils/

import { ref, computed } from 'vue'

export default function sum(num1,num2) {
  return {
    result: ref(num1+num2)
    
  }
}

2）setup中调用

<template>
    <div class="">
        <h1>Hi</h1>
        <input type="button" @click="sum" value="sum">
        num1:<input type="text" v-model="num1"><br>
        num2:<input type="text" v-model="num2"><br>
        result:{{result}}
    </div>
</template>

<script>
    import { ref } from "vue";
    import sum from '@/utils/Sum.js'
    export default {
        name: "404",
        // 将sum引入组件
        components:{sum }
        setup() {
            const num1 = ref(10);
            const num2 = ref(20);
            const result = sum(num1,num2);
            
            return {
                 num1,
                num2,
                result
            }
        }
    };
</script>


<style scoped>

</style>

（3）自定义VueSetup模板

可放于idea自定义模板中，是组合式api开发风格

<template>
    <div >
        #[[$END$]]#
<!--        <v-header />-->
    </div>
</template>

<script>
    import axios from 'axios';
    import { ref,reactive} from "vue";
    // import vHeader from "../components/Header.vue";

    export default {
        name: "${NAME}",
        setup() {
            // 组件加载,加载组合式函数
            components:{
                // Tages
            }
            const num = ref(0);
            const order = reactive({
                id : 1,
                name: "KK",
                price: 10

            })
            const fun=()=>{
                // axios请求格式
                axios({
                    method: 'post',
                    url: 'http://localhost:8081/getUser',
                    data: user
                })
                    .then((response)=>{
                        Object.assign(user,response.data);
                    })
                    .catch((error)=>{
                    })
                    .then(()=>{

                    })
            }

            return {
                user,
                order,
                fun
            }
        }
    };

</script>

<style scoped>

</style>

（4）Seup中常用函数

赋值式定义：即只是将值赋予定义的变量，其中一个变量改变不会影响另一变量的值

引用式定义：与赋值式定义不同，其中一个变量改变会影响另一变量的值（相当于c语言中，指针。赋予的是空间地址，而不是值）

函数	说明
computed	计算属性，接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。
onMounted	vue钩子，在组建加载时调用，在setup（）中使用
ref	赋值式定义一个响应式基础数据类型变量const num2 = ref(0)，在setup（）中使用
reactive	赋值式定义一个响应式多数据类型的对象const user = reactive({id:0,name:'Amy'})，在setuup（）中使用
toRef	引用式定义一个响应式变量，即将reactive对象中某一属性与定义的变量绑定，const idRef = toRef(user,'id')
toRefs	引用式定义一个响应式变量，即将reactive对象与定义的变量绑定，const userRefs = toRef(user)（userRefs.id.value才能获取值）

示例

• 说明：reactive,toRef,toRefs示例

<template>
    <div>
        <h1>reactive,toRef,toRefs Test</h1>
        <h2>toRefs Test</h2><br><br>
<!--        因为key1Ref是引用式定义的响应式变脸（引用响应式变量map的key1属性），所有两者的属性绑定，其中一个修改另一属性变量也修改-->
        Key1Ref:<input v-model="key1Ref" type="text"><br>
        map.key1:<input v-model="map.key1" type="text"><br><br>
        <h2>toRefs Test</h2><br><br>
<!--        因为mapRefs是引用式定义的响应式变量（引用响应式变量map），所有两者的属性绑定，其中一个修改另一属性变量也修改-->
        mapRefs.key1:<input v-model="mapRefs.key1.value" type="text">------map.key1:<input v-model="map.key1" type="text"><br>
        mapRefs.key2:<input v-model="mapRefs.key2.value" type="text">------map.key2:<input v-model="map.key2" type="text"><br>
        mapRefs.key3 <input v-model="mapRefs.key3.value" type="text">------map.key3:<input v-model="map.key3" type="text"><br>
    </div>
</template>

<script>
    import {toRef,toRefs,reactive} from "vue";
    export default {
        name: "HomeP",
        setup() {
            const map = reactive({
                key1:10,
                key2:20,
                key3:30,
            })
            const key1Ref = toRef(map,'key1');
            const mapRefs = toRefs(map);
            return {
                map,
                key1Ref,
                // 可能有问题
                mapRefs,
            }
        }
    };
</script>

<style scoped>

</style>

5. 其他

（1） 响应性

官方讲的非非非常好，总而言之，响应性是一种实时跟踪变量变化，并更新的特性（就像给变量加了一个监控器一样）

• 官方文档：跳转

1）可变响应式对象

双向绑定的对象是可变响应式对象，视图层（或模型层）（template（或script））中目标对象被修改，则另一层对象数据同步修改

2）不可变响应式对象

计算属性返回的对象便是不可变响应式对象，只有依赖数据发生改变，才会重新进行计算。否则就算直接修改计算属性的对象也没用

const num1 = ref(1);
const num2 = ref(2);
const count = computed(()=>num1+num2)


count++ // 没用的，结果依旧为3
num1++ // num1变为2，count依赖的num1数据发生变化，count 变为4

（2）目录别名

别名	表示
./	当前目录
…/	上级目录
@	src目录下（不可在图片路径中使用）
~@	src目录下（图片路径中使用）