前段时间介绍了应用Vite构建工具疾速创立Vue我的项目（Vue3.0我的项目创立），本文将进行该项目标开发和公布。目前的Vue版本是3.0.4，通过Vite的打包，就能够部署到服务器进行公布。
我的项目配置
1、数据来源于bilibili
2、服务器是Nginx
3、我的项目目录如下
该我的项目波及到组件、路由等基础知识。我的项目成型后的界面如下：
组件化开发
vue我的项目的长处就是组件化开发，将每个性能、或者是每个页面、容器分成各个组件，一方面是便于保护，另一方面是多人开发的时候也是能够提高效率。能够减少代码的复用性、可维护性和可测试性。进步开发效率，不便重复使用，简化调试步骤，晋升整个我的项目的可维护性，便于协同开发，是高内聚、低耦合代码的实际。
代码目录中的 components 目录就是组件的目录，在这里能够依据本人的我的项目去创立各个组件，间接在组件外面写html代码、以及调用vue的api去实现很多性能，例如axios网络申请，同时，组件内也能够写css款式。
如图所示，我的组件目录有4个组件，这四个组件对应的是下图：
组件的创立、注册、挂载
1. 创立组件
组件就是一个后缀名为 .vue 的文件，在 components 目录下创立你的 .vue 文件即可创立一个组件。组件外面有固定的格局，以本我的项目 tuijian.vue 为例：
<template></template> 标签所蕴含的是模板，外面能够写html的布局，例如div、p、span、li等标签，这是跟一般的html一样，间接在外面写你以后组件的html布局。
<script></script> 标签所蕴含的是以后组件须要应用的vue的一些api去实现的一些性能，成果，例如数据申请，数据渲染等。
<style></style> 标签所蕴含的是以后组件的css款式。其中有一个 scope 是代表这个款式仅限以后组件应用，如果前期这个组件被其余组件复用，援用，那么这个款式是不会影响到其余的组件的。
export default 是将以后组件导出，便于其余组件导入应用。name 是组件名称。data() 是以后组件的数据函数，通过return返回数据供页面应用。
<template> <h1>{{title}}</h1></template><script>export default { name: 'tuijian', data() { return { title:'这是举荐组件' } }}</script><style scope></style>2. 注册组件
当组件创立实现后，通过 export default 将组件导出，其余组件能够导入这个组件，其余组件导入这个主键，须要注册组件。
App.vue作为入口文件，必定是要导入很多咱们写的组件的，那么就以本我的项目的App.vue组件导入其余组件为例。
可见构造就是一个组件的根本构造，首先导入组件，通过import进行导入，前面间接是填写导入的组件的门路。
import Content from './components/Content.vue'通过 components:{} 注册组件，外面间接将导入的组件的名称填进去即可。例如注册 Content 组件。
最初一步就是在模板中嵌入组件即可，<Content /> 间接嵌入到div中。
<template> <div id="content"> <Content /> </div></template><script>import Content from './components/Content.vue'export default { name: 'App', components: { Content }}</script><style> *{ padding:0; margin:0; } body{ background: #eee; } #content{ width: 800px; height: 800px; margin:50px auto 0; }</style>路由的配置、挂载、应用
路由是属于vue内部的插件，所以是没有自带的，须要通过npm install来装置，我这里应用的是cnpm，因为下载比拟快，所以我这里间接就应用了cnpm的命令下载：
cnpm install vue-router如果你没有装置cnpm，能够自行百度cnpm的装置办法，能力应用cnpm
1. 路由配置
在 src 目录下创立一个 router 目录，在 router 下创立一个 index.js 文件，而后依照以下格局进行配置：
import {createRouter, createWebHistory} from 'vue-router'以上是引入了路由的createRouter以及createWebHistory，一个是创立路由，一个是创立路由的History模式。
路由分为History模式和Hash模式，其中History模式是相当于HTML5规范中的门路，而Hash模式是带有 # 号的门路模式，如果还不懂，请看上面的门路示例：
// History模式http://www.baidu.com/helloworld// Hash模式http://www.baidu.com/#/helloworld预计看懂了吧，其实就是门路中因为没有 # 号的区别，尽管只是一个符号的区别，然而也会影响到后续的开发和配置的。
另外的3个import就是引入对应的组件了，因为本我的项目就是点击左侧的栏目，右侧就展现对应栏目的组件，所以这边得引入这3个组件。
const routes=[] 是对路由门路的配置，path 是路由的门路，咱们要将每个组件的门路给配置好，以及每个门路对应的组件名。
import {createRouter, createWebHistory} from 'vue-router'import tuijian from '../components/tuijian.vue'import donghua from '../components/donghua.vue'import youxi from '../components/youxi.vue'const routes = [ { path:'/', component:tuijian }, { path:'/tuijian', component:tuijian }, { path:'/donghua', component:donghua }, { path:'/youxi', component:youxi }]const routerHistory = createWebHistory()const routers = createRouter({ history: routerHistory, routes: routes})export default routers以下是将以后路由的配置进行导出，路由模式抉择了History，通过 export default 导出以后路由配置。
const routerHistory = createWebHistory()const routers = createRouter({ history: routerHistory, routes: routes})export default routers2. 挂载路由
关上 main.js ，通过 import 倒入方才配置的路由 index.js
import router from "./router/index.js"具体如下：
import { createApp } from 'vue'import App from './App.vue'import router from "./router/index.js"import './index.css'const app = createApp(App)app.use(router)app.mount('#app')通过 app.use(router) 挂在路由到以后的vue实例。
3. 应用路由
本我的项目在 Content.vue 中应用到了路由。依据以下代码可知，有两个div，一个是left，一个是right，left展现栏目，right展现以后点击的栏目的数据。
通过 <router-link to=""></router-link> 这个标签去实现点击事件。这个标签最终会被浏览器渲染为html的 <a href=""></a> 标签，其中 to="" 就是指向路由门路。
通过 <router-view></router-view> 这个标签用于展现以后点击的栏目的数据对应的组件，在 index.js 外面曾经配置过每个门路下须要渲染的组件了。
<template> <!-- 左侧导航 --> <div id="left"> <div class="zhuanlan"> <ul> <li v-for="zhuanlan in zlitem" :key="zhuanlan.zlname"> <router-link :to="zhuanlan.zlrouter">{{zhuanlan.zlname}}</router-link> </li> </ul> </div> </div> <!-- 右侧列表 --> <div id="right"> <router-view></router-view> </div></template><script>export default { name: 'LeftDaoHang', data() { return { zlitem:[ {'zlname':'举荐','zlrouter':'tuijian'}, {'zlname':'动画','zlrouter':'donghua'}, {'zlname':'游戏','zlrouter':'youxi'} ] } }, created(){ var that = this; // 申请资源 async function getData() { const res = await fetch('tuijian.json'); const result = await res.json(); that.rightlist = result; } getData(); }}</script><style scope> *{ padding:0; margin:0; list-style: none; } #left{ width: 180px; height: 800px; float: left; } #left .zhuanlan{ width: 100%; height: 800px; } #left .zhuanlan .router-link-exact-active{ background: #00a1d6; color: #fff; border-radius: 10px; transition: 0.1s; } #left .zhuanlan ul li{ width: 100%; height: 45px; line-height: 45px; text-align: center; font-size: 16px; background: #fff; margin-bottom: 10px; border-radius: 10px; transition: 0.1s; } #left .zhuanlan a{ display: block; text-decoration: none; color: #666; } #left .zhuanlan ul li a:hover{ background: #00a1d6; font-weight: bold; color: #fff; cursor: pointer; border-radius: 10px; transition: 0.1s; } #right{ width: 600px; height: 800px; float: right; } #right .rightlist{ width: 100%; height: 800px; } #right .rightlist ul li{ width: calc(100% - 15px); height: 70px; background: #fff; border-bottom: 1px solid #eee; padding:15px 0 0 15px; } #right .rightlist ul li .zl_artcle_title{ width: 100%; height: 30px; float: left; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } #right .rightlist ul li .zl_info{ width:100%; height: 30px; } #right .rightlist ul li .zl_info .zl_artcle_author_avatar{ width: 30px; height: 30px; float: left; margin: 3px 0; } #right .rightlist ul li .zl_info .zl_artcle_author_avatar img{ width: 25px; height: 25px; border-radius: 100px; } #right .rightlist ul li .zl_info .zl_info_num{ float: left; font-size: 14px; color: #666; line-height: 30px; margin-right: 20px; }</style>vue我的项目的打包和公布
Vite提供了非常简单的打包命令，间接在但其概念vue我的项目的根目录下运行cmd，而后输出以下命令即可实现疾速的打包：
npm run build打包实现后，会在你的我的项目根目录下生成一个 dist 目录，这个目录就是曾经打包实现的HTML代码。
因为vue我的项目的代码无奈在服务器运行，更无奈在浏览器执行，因为vue源代码无奈被浏览器解析，都是须要通过打包、编译成服务器、浏览器意识的HTML、CSS、JavaScript代码能力失常拜访。
最初，将 dist 目录外面的代码上传到你的服务器即可公布。我这里以宝塔面板为例进行公布vue我的项目。
因为应用的是History模式的路由，所以还得配置一下伪动态，不然间接关上对应的路由是404的。
伪动态规定如下：
location / { if (!-e $request_filename) { rewrite ^/(\w+)$ /index.html last; }}最初就能够失常拜访了：
我的项目演示：http://demo.likeyunba.com/
总结
通过简略的学习，可见vue我的项目的长处，组件化开发，路由的配置等，其实都是挺容易入门的。
作者
TANKING
WeChat:sansure2016