创建VUE项目

1、安装Node.js

Node.js下载安装及环境配置教程【超详细】_nodejs下载安装教程_WHF__的博客-CSDN博客

2、创建vue项目

npx @vue/cli create my-project

3、安装vue router

可以按照以下步骤在 Vue 3 项目中安装 Vue Router： 在终端中，进入 Vue 3 项目的根目录。 运行以下命令来使用 npm 安装 Vue Router：npm install vue-router@next 打开 src/main.js 文件，并添加以下代码来引入和使用 Vue Router：         import { createApp } from 'vue'         import App from './App.vue'         import router from './router'         const app = createApp(App)         app.use(router)         app.mount('#app')     4. 创建 src/router/index.js 文件，并添加以下代码来配置路由：         import { createRouter, createWebHistory } from 'vue-router'         import Home from '../views/Home.vue'         import About from '../views/About.vue'         const routes = [ { path: '/', name: 'Home', component: Home },                  { path: '/about', name: 'About', component: About } ]         const router = createRouter({ history: createWebHistory(), routes })         export default router 在该代码中，我们通过 createRouter 函数创建了一个新的路由实例，并定义了两个路由：根路径 / 和路径 /about。我们还通过 createWebHistory() 函数指定了路由的模式为 HTML5 历史记录模式。      5.最后，在 src/App.vue 中使用 <router-view> 元素来渲染当前活动路由对应的组件。可以在该组件中添加各种导航栏、菜单等元素，以便用户可以通过点击链接或按钮来访问不同的路由。 以上步骤完成后，你的 Vue 3 项目就已经配置了 Vue Router，并且可以使用它来进行路由导航和组件渲染。

4、安装element-plus

npm install element-plus@next

可以按照以下步骤在 Vue 3 项目中安装 Element Plus： 在终端中，进入 Vue 3 项目的根目录。 运行以下命令来使用 npm 安装 Element Plus：npm install element-plus@next 打开 src/main.js 文件，并添加以下代码来引入和使用 Element Plus： import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; const app = createApp(App) app.use(ElementPlus) app.mount('#app') 重启应用程序，刷新浏览器，你的应用程序就可以开始使用 Element Plus 中的组件了。 以上步骤完成后，你的 Vue 3 项目就已经配置了 Element Plus，并且可以使用它来构建漂亮和响应式的用户界面。在你的 Vue 3 组件中，你可以按照 Element Plus 的文档及示例来使用其提供的组件、指令和插件等功能。

5、安装vuex

npm install vuex --save

Vuex 是 Vue.js 的官方状态管理工具，它可以让你更方便地管理应用中的状态。以下是 Vuex 的基本使用方法： 1. 创建一个 Vuex 存储器 要使用 Vuex，首先需要创建一个存储器。在存储器中定义应用程序的状态和变异方法。 import { createStore } from 'vuex' const store = createStore({ state() { return { count: 0 } }, mutations: { increment(state) { state.count++ } }, actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } }) 上述代码中，我们创建了一个 Vuex 存储器，并在存储器中定义了 state 对象来存储应用程序的状态。mutations 对象中定义了一些更改 state 的函数，而 actions 中定义了一些异步操作函数。 2. 在 Vue 应用程序中使用 Vuex 存储器 现在 Vuex 存储器已经准备好了，需要将其与 Vue 应用程序集成起来。 import { createApp } from 'vue' import App from './App.vue' import store from './store' createApp(App).use(store).mount('#app') 在 Vue 应用程序中，我们通过 .use(store) 将 Vuex 存储器安装到 Vue 实例上。 3. 在组件中使用存储器中的数据 使用 $store 属性来获取存储器中的状态并在组件中使用它们。 <template> <div> <p>Count: {{ $store.state.count }}</p> <button @click="$store.commit('increment')">Increment</button> <button @click="$store.dispatch('incrementAsync')">Increment Async</button> </div> </template> 上述代码中，我们使用 $store.state.count 获取存储器中的计数值，并使用 $store.commit('increment') 调用 increment 变异函数来增加计数器，或者使用 $store.dispatch('incrementAsync') 调用 incrementAsync action 异步操作函数来实现计数器增加的延时效果。 以上是 Vuex 的基本使用方法。通过 Vuex，你可以更方便地管理应用程序的状态，并使你的应用程序更加可维护和可读。

6、安装axios

npm install axios --save

要在 Vue 中使用 Axios，可以按照以下步骤进行操作： 使用 npm 命令安装 Axios： npm install axios --save 在需要使用 Axios 的组件或文件中导入 Axios： import axios from 'axios'; 发送 HTTP 请求： axios.get('/api/users') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); 上述代码中，我们通过 axios.get() 方法发送了一个 GET 请求，并将响应数据输出到控制台。如果请求失败，我们则将错误信息输出到控制台。 针对 HTTPS 协议的请求，需要在发送请求前设置 https.Agent： const https = require('https'); const agent = new https.Agent({ rejectUnauthorized: false }); axios.get('https://www.example.com/', { httpsAgent: agent }) .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); 上述代码中，我们首先导入 Node.js 中的 https 模块，并创建一个 https.Agent 对象，设置 rejectUnauthorized 属性为 false。然后，在发送 HTTPS 请求时，通过传递 httpsAgent 选项指定该请求使用我们刚刚创建的 https.Agent 对象作为代理。 可以选择在 Vue 项目中创建一个插件来全局注册 Axios，这样你就可以在组件中更轻松地使用它了： import axios from 'axios'; const AxiosPlugin = { install: (app) => { app.config.globalProperties.$http = axios; } }; export default AxiosPlugin; 然后在 Vue 应用程序的入口文件中，使用 use() 方法全局注册插件： import { createApp } from 'vue'; import App from './App.vue'; import AxiosPlugin from './plugins/axios'; const app = createApp(App); app.use(AxiosPlugin); app.mount('#app'); 现在，你就可以在任何地方使用 $http 属性来访问 Axios 实例和发送 HTTP 请求。 以上就是 Vue 中使用 Axios 发送 HTTPS 请求的基本方法。注意，在发送 HTTPS 请求时，需要设置相关的选项以确保请求可以正常运行。

7、安装webpack

下载 Webpack 以及 Webpack CLI 所需的依赖

npm install webpack webpack-cli --save-dev

在你的项目根目录下，创建一个名为 webpack.config.js 的文件，并添加以下代码：

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

打包

npx webpack