Vue 简单入手
前端工程化（Front-end Engineering）指的是在前端开发中，通过一系列工具、流程和规范的整合，以提高开发效率、代码质量和可维护性的一种技术和实践方法。其核心目的是使得前端开发变得更高效、可扩展和可维护。
文章目录
- 一、Vue 项目
- 1.1、快速搭建一个 Vue 项目开发环境
- 1. 安装 Node.js 和 npm
- 2. 安装 Vue CLI
- 3. 创建 Vue 项目
- 4. 进入项目目录并启动开发服务器
- 5. 编辑代码
- 6. 安装其他依赖（可选）
- 1.2、可视化创建Vue项目
- 方式一：可视化软件
- 方式二：图形化界面 Vue ui
- 1.3、项目目录结构
- 二、Vue 简易入门
- Vue组件库Element
- 1. 安装 Element UI （给项目）
- 2. 在项目中引入 Element UI
- 3. 使用 Element UI 组件
- 4. 按需加载（可选）
- 5. 自定义主题（可选）
- 6. 更多配置和使用
- 实战
- 三、打包
一、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-projectmy-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出现
