室内设计网站源码下载,wordpress移动端可视化,重庆网站优化,租网站服务器一个月多少钱前端工程化#xff08;Front-end Engineering#xff09;指的是在前端开发中#xff0c;通过一系列工具、流程和规范的整合#xff0c;以提高开发效率、代码质量和可维护性的一种技术和实践方法。其核心目的是使得前端开发变得更高效、可扩展和可维护。 文章目录 一、Vue 项…前端工程化Front-end Engineering指的是在前端开发中通过一系列工具、流程和规范的整合以提高开发效率、代码质量和可维护性的一种技术和实践方法。其核心目的是使得前端开发变得更高效、可扩展和可维护。 文章目录 一、Vue 项目1.1、快速搭建一个 Vue 项目开发环境1. 安装 Node.js 和 npm2. 安装 Vue CLI3. 创建 Vue 项目4. 进入项目目录并启动开发服务器5. 编辑代码6. 安装其他依赖可选 1.2、可视化创建Vue项目方式一可视化软件方式二图形化界面 Vue ui 1.3、项目目录结构 二、Vue 简易入门Vue组件库Element1. 安装 Element UI 给项目2. 在项目中引入 Element UI3. 使用 Element UI 组件4. 按需加载可选5. 自定义主题可选6. 更多配置和使用 实战 三、打包 一、Vue 项目
1.1、快速搭建一个 Vue 项目开发环境
1. 安装 Node.js 和 npm
Vue.js 基于 Node.js 开发因此需要安装 Node.js包括 npmNode.js 的包管理器。 下载并安装 Node.js 前往 Node.js 官方网站 下载并安装适合你操作系统的版本。建议选择 LTS长期支持版本。 安装 Node.js 检查安装是否成功 打开终端或命令行执行以下命令 node -v
npm -v如果能够显示版本号说明 Node.js 和 npm 安装成功。
2. 安装 Vue CLI
Vue CLICommand 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 vuex1.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-ui2. 在项目中引入 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 组件
templatedivel-button typeprimaryPrimary Button/el-button/div
/templatescript
export default {name: App
};
/scriptstyle scoped
/* 你可以自定义样式 */
/style4. 按需加载可选
如果你只想使用 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出现
