Ubuntu部署Minio(单机单驱动)-阿里云开发者社区

Ubuntu部署Minio(单机单驱动)

2024-06-24 8

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Ubuntu部署Minio(单机单驱动)

spa----单页Web应用（single page application，SPA）

1.前提

nodeJS环境已经搭建完毕

node -v
npm -v

2. 利用Vue-cli来构建spa项目

1.什么是Vue-cli

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：

vue init webpack xxx

注1：xxx 为自己创建项目的名称

注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境

2.安装vue-cli

npm install -g vue-cli # -g表示全局安装
npm install webpack -g

没有报错则表示安装成功

# cmd窗口执行,注意此处的V是大写的
vue -V

3. 使用脚手架vue-cli来构建项目

1.cmd窗口执行

vue init webpack xxx #此处的xxx指的是项目名

1.Project name：项目名，默认是输入时的那个名称spa
2.Project description：项目描述
3.Author：作者
4.Vue build：选择题
  4.1 Runtime + Compiler: recommended for most users//运行加编译，官方推荐
  4.2 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files //仅运行时
5.Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件
6.Use ESLint to lint your code：是否用ESLint来限制你的代码错误和风格。N  新手就不用了，但实际项目中一般都会使用，这样多人开发也能达到一致的语法
7.Set up unit tests：是否安装单元测试 N
8.Setup e2e tests with Nightwatch?：是否安装e2e测试  N
9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
  > Yes, use NPM                    
      Yes, use Yarn
      No, I will handle that myself     
//选择题：选第一项“Yes, use NPM”是否使用npm install安装依赖

显示如下内容表示创建成功

2.切换路径到这个spa项目

cd spa
npm install # 安装项目所需要的npm模块
npm run dev # 运行项目

出现以下页面表示运行成功

4.项目结构说明

1.build 文件夹

这个文件夹主要是进行webpack的一些配置

1.webpack.base.conf.js

webpack基础配置,开发环境,生产环境都依赖

2.webpack.dev.conf.js

webpack开发环境配置

3.webpack.prod.conf.js

webpack生产环境配置

4. build.js

生产环境构建脚本

5.vue-loader.conf.js

此文件是处理.vue文件的配置文件

2.webpack.dev.conf.js

webpack开发环境配置

3.webpack.prod.conf.js

webpack生产环境配置

4. build.js

生产环境构建脚本

5.vue-loader.conf.js

此文件是处理.vue文件的配置文件

3.node_modules文件夹

存放npm install时根据package.json配置生成的npm安装包的文件夹

4.src文件夹

源码目录(开发中用得最多的文件夹)

1.assets

共用的样式、图片

2. components

业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件

3.router

设置路由

4.App.vue

vue文件入口界面

5.main.js

对应App.vue创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

5.static文件夹

存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置, 对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用

6.package.json

这个文件有两部分是有用的：scripts 里面设置命令以及在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

5.什么是.vue文件

.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 ,

这三个部分分别代表了 html,js,css。

**注1：**不能直接把html代码包裹在中，而是必须在里面方置一个html标签来包裹所有的代码。

一般情况是使用

标签包含其它的代码(保证只有一个根元素)

<template>
  <div>...</div>
</template>

**注2：**js代码写在

<script>
  export default {
    name: 'App'
  }
</script>

**注3：**样式与以前的写法一样

6.使用路由

将前一部分内容重新写一遍

博客链接: https://blog.csdn.net/qq_50477101/article/details/131838689

效果

1.在components中添加Home.vue文件,编写内容

<template>
  <div>这是首页,展示网站的最新的内容</div>
</template>

<script>
export default{
  name: 'Home',
  data(){
    return {

    }
  }
}
</script>

<style>
</style>

2.在components中添加About.vue文件,编写内容

<template>
  <div>
    这是一个关于的页面
  </div>
</template>

<script>
export default{
  name: 'About',
  data(){
    return {

    }
  }
}
</script>

<style>
</style>

3.在router/index.js中写入以下内容

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

7.使用嵌套路由

效果

修改About.vue文件

<template>
  <div>
    <router-link to="/aboutMe">关于站长</router-link>
    <router-link to="/aboutWebsite">关于网站</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default{
  name: 'About',
  data(){
    return {

    }
  }
}
</script>

<style>
</style>

添加AboutMe.vue文件

<template>
  <div>关于本站创始人,xxxxxxxxx,xxxxx</div>
</template>

<script>
export default {
  name: "AboutMe"
}
</script>

<style scoped>

</style>

添加AboutWebsite.vue文件

<template>
  <div>本站致力于xxx,目前发展了xxx,将要发展xxx</div>
</template>

<script>
export default {
  name: "AboutWebsite"
}
</script>

<style scoped>

</style>

修改router/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
import AboutMe from '@/components/AboutMe'
import AboutWebsite from '@/components/AboutWebsite'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      children:[
        {
          path: '/aboutMe',
          name: 'AboutMe',
          component: AboutMe
        },
        {
          path: '/aboutWebsite',
          name: 'AboutWebsite',
          component: AboutWebsite
        },
      ]
    }
  ]
})