前端工程化

  前端工程化是为了提高前端开发的效率和质量，使团队能够更好地协作和管理前端项目。

1.工具

搭建前端的项目需要两个工具

1.1 Node.js

CNPM Binaries Mirror (npmmirror.com)打开官网

这里我们下载18.16.0版本的Node

下载好了就一路安装 直到完成。

1.2 Vue-cli

首先创建你的项目文件夹，接着cd到那个路径下。

npm install -g @vue/cli@4.5.15

执行上面这段代码，安装vue-cli

安装完成后输入：

vue --version

看看安装完成没。

 

安装完成后就可以写项目了。

2 搭建项目

  首先，在刚刚的路径下面输入以下指令来创建vue项目

vue create 项目名称

创建完成后，将文件目录按照下面的补全：

 每个文件有每个文件的作用，且听我细细道来。

components文件夹中放置的是.vue文件，前端的大部分代码都在里面（包括html还有script）

router 文件夹中放置的是index.js文件，负责路径管理

utils  中放置的是一些工具，用来简化代码

App.vue 中是主类，我们在comopoents中写的.vue文件之后都需要组件化放置到这个App.vue页面中。

整体的流程大概是 ： 先写components中的vue组件，写完之后去router的index中配置对应的路由，然后配置完路由后就可以调试程序了。

router的配置如下：

对于main.js文件，是一个Vue.js应用程序的入口文件，每增加一个应用插件，都必须在其中写出对应的代码来注册插件，使得整个应用程序中都能使用这个插件。

详细的代码如下（可能有补充的插件）：

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

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(router)

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

 至此，前端工程化基本完成，希望本篇博客对您理解和使用前端工程化有所帮助。如有任何疑问或建议，请随时留言。感谢阅读！