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

前端配置

• 1.下载nodejs 18 lts
• 2.配置nodejs和安装vue
• 3.vue调试技巧
• 4.编辑main.js
• 5.nodejs基础语法
• • 5.1.import
  • 5.2.export
  • 5.3.箭头函数 =>
• 6.vue文件编译
• • 6.1.模板语法
  • 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:\Users\18928\Desktop\资源网站设计\Project\Code\NodeJS\Cache16\node_global"
npm config set cache "C:\Users\18928\Desktop\资源网站设计\Project\Code\NodeJS\Cache16\node_cache"

npm config set prefix "C:\Users\18928\Desktop\资源网站设计\Project\Code\NodeJS\Cache18\node_global"
npm config set cache "C:\Users\18928\Desktop\资源网站设计\Project\Code\NodeJS\Cache18\node_cache"

#添加路径
set path=%path%;C:\Users\18928\Desktop\资源网站设计\Project\Code\NodeJS\Cache18\node_global

#安装vue
npm install vue -g
npm i @vue/cli -g

#创建项目
vue create resourceshow
cd resourceshow
npm 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。

<style>
  @import './test.css';
</style>

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, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){
   ...}
export class ClassName {
   ...}

// 导出列表
export {
    name1, name2, …, nameN };

// 重命名导出
export {
    variable1 as name1, variable2 as name2, …, nameN };

// 解构导出并重命名
export const {
    name1, name2: bar } = o;

范例

// 导出 test.ts
export const a = 1
export 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