Vue 脚手架学习笔记

1 环境搭建

1.1 关于 Node.js

命令行工具：Node.js 提供了强大的命令行工具开发能力，可以用于构建自定义的命令行工具，例如构建脚手架、自动化部署、数据处理等。

前端构建工具：Node.js 可以用于构建和管理前端项目。例如，使用 Node.js 的包管理器 npm 可以方便地安装、更新和管理项目所需的第三方库和工具；使用构建工具如 webpack、gulp、Parcel 等可以进行代码打包、压缩、编译、模块化等处理。

Web 开发：Node.js 可以用于构建 Web 应用程序和 API 服务端。通过使用 Express、Koa、Hapi 等 Web 框架，可以轻松创建功能强大的 Web 应用程序，并支持处理大量并发请求。

实时应用程序：Node.js 非阻塞 I/O 和事件驱动模型使其适合构建实时应用程序，如聊天应用、游戏服务器、实时数据分析等。Node.js 可以通过 WebSocket、Socket.io 等技术实现实时双向通信，处理大量即时数据。

1.2 下载 Node.js

一直点击下一步就可以了，不需要进行修改

node-v16.14.2 安装包https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v16.14.2/node-v16.14.2-x64.msi

1.3 测试运行

出现版本号表示安装成功

1.3 配置下载源

要查看 npm 下载源的配置信息，可以使用以下命令：
npm config get registry

如果想要修改 npm 的下载源，可以使用以下命令来设置新的下载源：
npm config set registry <新的下载源地址>

将下载源切换到淘宝镜像：
npm config set registry https://registry.npm.taobao.org/

2 安装 VUE CLI

安装 Vue CIi 命令：

npm install -g @vue/cli

出现警告无所谓，只要不是 Error 就可以！

3 创建 VUE CLI 工程

执行创建的命令：vue create <你的项目名称>

选择第四个 Manually select features 手动选择要素

选择如图所示的功能

选择 Vue2

选择 In package.josn

成功后出现如图所示

执行上述两行命令运行

在浏览器上看运行效果

可以在 idea 中打开进行操作

4 配置 Element UI

组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/installation先通过 npm 进行安装

npm i element-ui -S

在 main.js 中进行环境配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";



Vue.prototype.axios = axios;
Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')