关于vite:使用Vite构建工具快速创建Vue项目Vue30项目开发

前段时间介绍了应用 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 routers

2. 挂载路由

关上 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