Vue 简单入手

前端工程化（Front-end Engineering）指的是在前端开发中，通过一系列工具、流程和规范的整合，以提高开发效率、代码质量和可维护性的一种技术和实践方法。其核心目的是使得前端开发变得更高效、可扩展和可维护。

一、Vue 项目

1.1、快速搭建一个 Vue 项目开发环境

1. 安装 Node.js 和 npm

Vue.js 基于 Node.js 开发，因此需要安装 Node.js（包括 npm，Node.js 的包管理器）。

• 下载并安装 Node.js：

  • 前往 Node.js 官方网站 下载并安装适合你操作系统的版本。建议选择 LTS（长期支持）版本。

  安装 Node.js
  

• 检查安装是否成功：
  打开终端或命令行，执行以下命令：

  node -v
  npm -v
  

  如果能够显示版本号，说明 Node.js 和 npm 安装成功。
  

2. 安装 Vue CLI

Vue CLI（Command Line Interface）是 Vue.js 官方提供的脚手架工具，用于快速生成项目模板和自动化任务。

• 全局安装 Vue CLI：
  在终端中执行以下命令安装 Vue CLI：

  npm install -g @vue/cli
  

  或者，如果你想使用更轻量级的 Vue CLI，使用以下命令：

  npm install -g @vue/cli-service-global
  

• 检查 Vue CLI 是否安装成功：
  执行以下命令：

  vue --version
  

  如果能够显示 Vue CLI 的版本号，说明安装成功。
  

3. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目。

• 创建一个新项目：
  在命令行中执行以下命令：

  vue create my-project
  

  my-project 是你项目的名称，你可以根据需要替换为其他名称。

• 选择项目配置：
  执行上述命令后，Vue CLI 会引导你选择项目的配置。你可以选择默认配置，也可以根据需要手动选择功能（如 Babel、TypeScript、PWA 支持、Router、Vuex 等）。

• 安装依赖：
  Vue CLI 会根据你的选择安装相关依赖，过程可能需要几分钟时间。

4. 进入项目目录并启动开发服务器

• 进入项目文件夹：

  cd my-project
  

• 启动开发服务器：
  执行以下命令启动 Vue 项目的开发服务器：

  npm run serve
  

• 访问项目：
  默认情况下，Vue 项目会启动在 http://localhost:8080/，你可以在浏览器中打开这个地址查看你的 Vue 项目。

5. 编辑代码

• 使用你喜欢的代码编辑器（如 VS Code）打开项目文件夹，开始编辑代码。Vue 项目结构通常包括：
  • src/：源代码文件夹，包含主要的 Vue 组件和应用逻辑。
  • public/：公共文件夹，包含 index.html 文件等静态资源。
  • package.json：项目的配置文件，定义了项目依赖和构建脚本。

6. 安装其他依赖（可选）

根据项目需求，你可能需要安装其他的依赖，如 Vue Router、Vuex 等。

• 安装 Vue Router：

  npm install vue-router
  

• 安装 Vuex：

  npm install vuex
  

1.2、可视化创建Vue项目

方式一：可视化软件

选择的方式是WebStrom或者是IDEA软件

选择版本

终端运行 npm run serve

方式二：图形化界面 Vue ui

1.3、项目目录结构

├── node_modules/        # 项目依赖的第三方模块
├── public/              # 公共文件夹，存放静态资源，如favicon和index.html等
│   ├── favicon.ico      # 网站图标
│   └── index.html       # 应用的入口HTML文件
├── src/                 # 源代码文件夹
│   ├── assets/          # 静态资源文件夹（图片、字体等），通过webpack引入
│   ├── components/      # Vue组件文件夹
│   ├── router/          # 路由文件夹，存放应用的路由配置
│   │   └── index.js     # 路由配置文件
│   ├── store/           # Vuex状态管理文件夹
│   │   └── index.js     # Vuex的状态配置文件
│   ├── views/           # 页面级别的组件，通常对应于路由的页面
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件，初始化Vue实例
├── .env                 # 环境变量配置文件
├── .gitignore           # Git忽略文件配置
├── babel.config.js      # Babel配置文件，用于转译JS代码
├── package.json         # 项目描述文件，包含项目依赖及脚本
└── vue.config.js        # Vue CLI的项目配置文件，webpack配置。

启动

或者cmd 输入npm run serve

配置端口

二、Vue 简易入门

Vue组件库Element

Vue组件库 Element（通常指的是 Element UI）是一个基于 Vue.js 的 UI 组件库，提供了丰富的组件和样式，可以帮助开发者快速构建界面。以下是如何在 Vue 项目中使用 Element UI 的步骤：

1. 安装 Element UI （给项目）

在 Vue 项目中安装 Element UI，可以通过 npm 或 yarn 进行安装。

# 使用 npm 安装
npm install element-ui --save# 或者使用 yarn 安装
yarn add element-ui

2. 在项目中引入 Element UI

在 Vue 项目的入口文件（通常是 main.js 或 main.ts）中引入 Element UI。

// 引入 Vue 和 Element UI
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';// 使用 Element UI
Vue.use(ElementUI);// 创建 Vue 实例
new Vue({render: h => h(App),
}).$mount('#app');

3. 使用 Element UI 组件

Element UI 提供了丰富的组件，可以直接在你的 Vue 组件中使用。例如，使用 el-button 组件：

<template><div><el-button type="primary">Primary Button</el-button></div>
</template><script>
export default {name: 'App'
};
</script><style scoped>
/* 你可以自定义样式 */
</style>

4. 按需加载（可选）

如果你只想使用 Element UI 的某些组件，可以使用按需加载来减少打包体积。需要安装 babel-plugin-component 插件来实现按需加载。

# 安装 babel-plugin-component 插件
npm install babel-plugin-component --save-dev

然后，在 babel.config.js 文件中配置插件：

module.exports = {plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}]]
};

在组件中按需引入需要的 Element UI 组件：

import { Button } from 'element-ui';export default {components: {'el-button': Button}
};

5. 自定义主题（可选）

Element UI 支持自定义主题，可以通过修改 Less 变量或使用 Element-Plus 的自定义主题工具来实现。

6. 更多配置和使用

Element UI 提供了丰富的组件和功能，例如表单、弹框、表格、分页等，具体的使用方法和配置可以参考 Element UI 官方文档。

实战

复制其组件化代码

三、打包

NGINX

更改端口

然后把打包的Vue项目方进去，打包的是项目目录下有dist包

然后将其中内容复制进nginx目录下的html目录，再点击nginx.exe，最终在浏览器中访问
localhost:90出现