Element-ui-vue3-前端界面开发-配置-编辑main.js-nodejs基础语法-vue3-html模板语法-vue文件编译

前端配置

• 1.下载nodejs 18 lts
• 2.配置nodejs和安装vue
• 3.vue调试技巧
• • 3.1.debugger
  • 3.2.vue devtools
• 4.编辑main.js
• 5.nodejs基础语法
• • 5.1.import
  • • 5.1.1.导入单个模块或组件
    • 5.1.2.导入整个模块或库
    • 5.1.3.导入默认导出
    • 5.1.4.导入 css文件
    • 5.1.5.导入模块和组件
  • 5.2.export
  • • 5.2.1.命名导出
    • 5.2.2.默认导出（每个模块包含一个）
    • 5.2.3.导出模块合集
    • 5.2.4.export和export default的区别
  • 5.3.箭头函数 =>
  • • 5.3.1.语法
    • 5.3.2.范例
• 6.vue文件编译
• • 6.1.模板语法
  • • 6.1.1.双大括号表达式
    • 6.1.2.this指针改代理对象
    • 6.1.3.条件渲染 v-if, v-else-if, v-else
    • 6.1.4.属性绑定 v-bind
    • 6.1.5.事件监听 v-on
    • 6.1.6.表达数据的双向绑定 v-model
    • 6.1.7.列表渲染 v-for
    • 6.1.8.更新内容 v-html
    • 6.1.9.ref 文档节点索引
    • 6.1.10.计算属性
    • 6.1.11.监听属性 watch
    • 6.1.12.修饰符
    • 6.1.13.方法调用
    • 6.1.14.指令参数
  • 6.2.setup data create混编
  • 6.3.data函数

1.下载nodejs 18 lts

作者在官网下载node-v18.20.2-x64.msi版本，然后默认点击下一步安装nodejs。

2.配置nodejs和安装vue

npm config set registry https://registry.npmmirror.com #设置镜像npm config get registry #查看镜像npm config set prefix "C:\Users928\Desktop\资源网站设计\Project\Code\NodeJS\Cache16\node_global"npm config set cache "C:\Users928\Desktop\资源网站设计\Project\Code\NodeJS\Cache16\node_cache"npm config set prefix "C:\Users928\Desktop\资源网站设计\Project\Code\NodeJS\Cache18\node_global"npm config set cache "C:\Users928\Desktop\资源网站设计\Project\Code\NodeJS\Cache18\node_cache"#添加路径set path=%path%;C:\Users928\Desktop\资源网站设计\Project\Code\NodeJS\Cache18\node_global#安装vuenpm install vue -gnpm i @vue/cli -g#创建项目vue create resourceshowcd resourceshownpm run serve#安装界面npm install element-ui -g

3.vue调试技巧

3.1.debugger

在指定位置加入调试语句：

debugger

应用debugger调试Vue项目，需要在项目中需要的位置写debugger，项目运行后，打开浏览器按F12，在chrome sources页签中就会直接进入断点，至此就可以可以进行单步、跳步调试。

3.2.vue devtools

通过vue.js devtools配合在浏览器中展示源代码（Sources标签页）打断点，来调试非常也是非常方便，修改配置文件vue.config.js，如下所示：

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

如下图所示：

找到代码位置，打下断点。

4.编辑main.js

可以在main.js中添加js代码来扩展现有的功能，它在src目录下，内容如下所示：

import {    createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')

比如在最后一行下断点，然后重新加载，就会在指定暂停调试。

5.nodejs基础语法

5.1.import

5.1.1.导入单个模块或组件

import {    模块名 } from '模块路径';//实例import {    ref, reactive } from 'vue';

在上述示例中，使用import语法从vue模块中导入了ref和reactive两个函数。

5.1.2.导入整个模块或库

import * as 模块名 from '模块路径';//实例import * as axios from 'axios';

在上述示例中，使用import语法将整个axios库导入为一个命名空间对象。

5.1.3.导入默认导出

import 默认导出名称 from '模块路径';//实例import Vue from 'vue';

在上述示例中，使用import语法将vue模块的默认导出（通常是Vue构造函数）导入为Vue变量。

5.1.4.导入 css文件

import 'iview/dist/styles/iview.css';

如果是在.vue文件中，需要在其外面套一个style。

  @import './test.css';

5.1.5.导入模块和组件

解析import '@…'语句，@等价于 /src 这个目录，避免写麻烦而又易错的相对路径。

导入模块

import {    getCodeImg } from "@/api/login";import Cookies from "js-cookie";import {    encrypt, decrypt } from '@/utils/jsencrypt'

导入组件

import name1 from './name1';import name2 from './name2';import App from './app.vue';components:{     name1,  name2,  App,},

5.2.export

在创建 JavaScript 模块时，export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用import 进行导入时，这些绑定值只能被导入模块所读取，但在 export 导出模块中对这些绑定值进行修改，所修改的值也会实时地更新。

5.2.1.命名导出

// 导出单个特性export let name1, name2, …, nameN; // also var, constexport let name1 = …, name2 = …, …, nameN; // also var, constexport function FunctionName(){   ...}export class ClassName {   ...}// 导出列表export {    name1, name2, …, nameN };// 重命名导出export {    variable1 as name1, variable2 as name2, …, nameN };// 解构导出并重命名export const {    name1, name2: bar } = o;

范例

// 导出 test.tsexport const a = 1export const b = 2// 导入import {    a, b } from '/@/utils/test'console.log(a, b) // 1, 2

使用 * 接受所有的导出

import * as test from'/@/utils/test'  console.log(test)

5.2.2.默认导出（每个模块包含一个）

// 默认导出export default expression;export default function (…) {    … } // also class, function*export default function name1(…) {    … } // also class, function*export {    name1 as