前段时间介绍了使用Vite构建工具快速创建Vue项目（Vue3.0项目创建），本文将携带出项目的开发和发布。目前Vue版本为3.0.4，可以通过Vite打包部署到服务器发布。项目配置1.数据来自bilibili2，服务器为Nginx3，项目目录如下。本项目涉及组件、路由等基础知识。项目形成后的界面如下：组件化开发Vue项目的优势是组件化开发，将每个功能，或者说每个页面，容器都划分成组件。一方面便于维护，另一方面多人开发时也能提高效率。它可以增加代码的可重用性、可维护性和可测试性。提高开发效率，便于复用，简化调试步骤，提高整个项目的可维护性，便于协同开发，是代码高内聚低耦合的实践。代码目录下的components目录就是组件的目录。这里可以根据自己的项目创建各种组件，直接在组件中编写html代码，调用vue的API实现axios网络请求等诸多功能。同时，组件也可以写css样式。如图，我的组件目录下有4个组件，这4个组件对应下图：组件创建、注册、挂载1.创建一个组件一个组件就是一个后缀为.vue的文件，在components中目录在下面创建您的.vue文件以创建一个组件。组件中有固定的格式，以本项目tuijian.vue为例：标签包含一个模板，可以编写HTML布局，比如div、p、span、li等标签，this就是和普通的html一样，直接在里面写你当前组件的html布局。标签包含当前组件需要使用的一些功能和效果，实现vue的一些API，如数据请求，数据渲染等。标签包含css当前组件的样式。其中一个范围意味着此样式仅由当前组件使用。如果此组件以后被其他组件复用引用，则此样式不会影响其他组件。export默认是导出当前组件，以便导入其他组件使用。名称是组件名称。data()是当前组件的数据函数，通过return返回数据供页面使用。{{title}}
importContentfrom'./components/Content.vue'exportdefault{name:'App',components:{内容}}路由的配置、挂载、使用路由都是vue之外的插件，所以不是内置的，需要通过npminstall安装。我这里使用cnpm，因为下载比较快，所以这里直接使用cnpm命令下载：cnpminstallvue-router如果你没有安装cnpm，可以百度cnpm安装方法使用cnpm1。路由配置在src目录下创建一个router目录，在router下创建一个index.js文件，然后按照下面的格式进行Configure：import{createRouter,createWebHistory}from'vue-router'以上是createRouter和路由的createWebHistory，一个是创建一个路由，一个是创建一个路由的History模式。路由分为History模式和Hash模式。History模式相当于HTML5标准中的路径，Hash模式就是带#号的路径模式。如果你还不明白，请看下面的路径示例：//Historymodehttp://www.baidu.com/helloworld//Hashmodehttp://www.baidu.com/#/helloworld我猜的你懂了吧，其实路径上并没有什么区别，因为没有#，虽然只是一个符号的区别，但是也会影响到后续的开发和配置。另外3个import是导入对应的组件，因为本项目是点击左边的列，右边会显示对应列的组件，所以这里必须导入这3个组件。constroutes=[]是路由路径的配置，path是路由路径，我们需要配置每个组件的路径，以及每个路径对应的组件名称。import{createRouter,createWebHistory}from'vue-router'importtuijianfrom'../components/tuijian.vue'importdonghuafrom'../components/donghua.vue'importyouxifrom'../components/youxi.vue''constroutes=[{path:'/',component:tuijian},{path:'/tuijian',component:tuijian},{path:'/donghua',component:donghua},{path:'/youxi',component:youxi}]constrouterHistory=createWebHistory()constrouters=createRouter({history:routerHistory,routes:routes})exportdefaultrouters下面是导出当前路由的配置。路由模式选择History，通过exportdefaultCurrentroutingconfiguration导出。constrouterHistory=createWebHistory()constrouters=createRouter({history:routerHistory,routes:routes})exportdefaultrouters2.挂载路由并打开main.js，导入路由index.jsimportrouterfrom"./router/index.js"如下：import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom"./router/index.js"import'./index.css'constapp=createApp(App)app.use(router)app.mount('#app')通过app.use(router)路由到当前vue实例。3.使用路由本项目在Content.vue中使用了路由。根据下面的代码，我们可以看到有两个div，一个在左边，一个在右边。左边显示列，右边显示当前点击列的数据。使用标签
