参考文档：https://router.vuejs.org/zh/guide/
参考页面：https://oneinstack.com/auto/
一、创建vue项目
1.1 创建项目
1.2 install安装
PS D:\gitee\deploy\vue\oneinstack> npm install1.3 启动
PS D:\gitee\deploy\vue\oneinstack> npm run dev
1.4 访问
二、样例页面分析
2.1 源站点
https://oneinstack.com/auto/ 重写一个页面，封装自己的交互式命令
2.2 自定义页面
页面重新写布局，同时删除掉一些没必要的链接
三、vue项目默认目录分析
3.1 目录及文件信息参考如下链接
https://juejin.cn/post/6940798929030086687
3.2 app.vue
根组件，可以理解成网站的入口组件。同时在该文件中可以导入其他的组件，如：HelloWorld、TheWelcome
3.3 components
其他组件存放的目录，当然也可以自定义一个组件目录
3.4 main.js
入口js文件
四、配置路由及组件
4.1 安装vue3脚手架
4.1 安装vue3脚手架
PS D:\gitee\deploy\vue\oneinstack> npm install -g @vue/cli
PS D:\gitee\deploy\vue\oneinstack> vue --version
@vue/cli 5.0.8
4.2 安装vue-router
PS D:\gitee\deploy\vue\oneinstack> npm install vue-router@4备注：vue3对应的route版本是4
4.3 在src目录下创建router、views两个目录
router： 保存路由文件目录
views： 保存自定义组件目录
4.4 views目录下创建两个基本组件
Home.vue 文件
About
五、创建路由js文件
在router目录下创建index.js文件，路由实例是通过调用createRouter()函数创建的。官方文档参考：
https://router.vuejs.org/zh/guide/
index.js文件
import { createWebHistory, createRouter } from 'vue-router'
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";
const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/about', name: 'about', component: About },
]
const router = createRouter({
history: createWebHistory(),
routes: routes,
})
export default router六、将页面和路由引入项目
6.1 main.js入口文件
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router/index.js";
const app = createApp(App)
app.use(router)
app.mount('#app')备注：根据自己的需求调整
6.2 app.vue文件
About
6.3 访问
备注：都可以访问到对应的页面，所以整体路由和页面就配置完了，接下来就是写页面了
七、页面布局
7.1 在components目录下创建Header.vue、Content.vue、Footer.vue
这三个页面主要用来布局页面不同的部分
7.2 在views下创建OneinStack.vue组件
将跟目录的路由转发至OneinStack.vue组件，代码如下：
7.2.1 在script标签下，引入上面3个组件
import { ref } from 'vue'
const maxWidth = 1100
const backGround = '#51aded'
const disableValue = ref(true)
import Header from "@/components/Header.vue";
import Content from "@/components/Content.vue";
import Footer from "@/components/Footer.vue";备注：这里通过const声明了3个只读常量
7.2.2 在style样式标签中定义了一个content元素的样式
.content{
max-width: 1100px;
width: 100%;
margin: 0 auto;
background-color: #ffffff;
}7.2.3 在template模版中引用了3个组件
7.3 OneinStack.vue完整代码
7.4 修改路由
在index.js文件中引入组件，并且替换掉根目录的组件
import OneinStack from "@/views/OneinStack.vue";
7.5 访问测试
在上面三个组件中随便一个组件下写一串文字，我这里选择了Content.vue组件
7.6 理解css样式
https://www.runoob.com/css/css-tutorial.html
max-width： 表示页面最大的宽度
width： 表示div的宽度，可以选择auto或者100%
margin： 外边距，比如有两个div，它们没有包含关系，这个时候可以用外边距来设置它们的位置
padding： 内边距，比如有个div的盒子在另外一个大div盒子里面，那么这个div可以设置内间距定位
background-color： 页面背景颜色八、页面布局
之后需要引用element组件写交互式功能，会使用到其组件样式。
静态页面参考地址：https://gitee.com/xiangys0134/deploy/blob/master/vue/oneinstack/src/components/index.html
九、使用element组件
https://element-plus.org/zh-CN/guide/installation.html
9.1 安装组件
npm install element-plus --save
9.2 完整引入组件
main.js文件下
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
十 、功能完善
10.1 单选框功能
“WebServer类型”类型中选择对应的单选框，生成对应的脚本命令。这里首先要通过一个switch开关的判断（“安装WebServer”这个开关是否打开，如果打开才可以生成对应脚本命令），组件参考地址：https://element-plus.org/zh-CN/component/switch.html
10.1.1 源码分析
可以看到，在js中默认有一个为true的value1变量，通过点击开关v-model的这个值会从true变为false。我们试下这行代码。
Content.vue组件中class选择器为“nginx_select_left”中进行配置。
注销，在其上新增一行：
10.1.2 查看页面
打开状态时值为true：
关闭状态时值为false：
备注：有了这个开关功能之后就可以做下一步的操作了。比如当这个开关只有为true时才能生成对应的脚本命令。
10.1.3 js代码
import { ref } from 'vue'
const nginx_sw = ref(true)备注：ref是页面的DOM
10.2 WebServer类型的选择
10.2.1 需求分析
需求分析：通过拿到nginx_sw变量的值，判断是否为真并生成对应脚本命令，脚本命令生成结构参考：https://oneinstack.com/auto/ 以安装Nginx为例，命令为：--nginx_option 1，Tengine、OPenresty的命令分别是选项：2和选项3。
这里需要使用到select选择器。参考地址：https://element-plus.org/zh-CN/component/select.html
代码分析：
v-model="value" 这里表示它是一个最终的值，也就是你选择之后最终得到的值。第二个是这里有个options的列表，而模版中可以将这个列表进行迭代，并且渲染label值和获取到value值。
10.2.2 代码调试
template模版代码：
{{ nginx_value }}
js代码：
const nginx_value = ref('')
const nginx_options = [
{
value: '--nginx_option 1',
label: 'Nginx',
},
{
value: '--nginx_option 2',
label: 'Tengine',
},
{
value: '--nginx_option 3',
label: 'Openresty',
},
]10.2.3 查看效果
10.3 通过switch开关隐藏掉WebServer类型及对应的下拉框。
10.3.1 需求分析
当点击“安装WebServer”按钮关闭选项时，应该要将对应的选项都隐藏掉。这里首先要通过这个开关的布尔值进行判断，并且需要对DOM进行操作。我这里基本都是用的是class选择器，所以我使用DOM的getElementsByClassName方法。参考地址：https://www.runoob.com/jsref/met-document-getelementsbyclassname.html
这里我使用了一个js的change事件的操作。change事件表示当值被改变时，就会触发change事件。它不同于click点击事件。
10.3.2 template模版代码
在开关的位置上加了一个change事件：@change="fun_nginx_sw"
10.3.3 前端功能分析
当我对class=‘nginx_select_right’ 中添加一个样式‘display: none‘’时，右边的下拉框就都没有了。看效果：
网页中已经没有对应下拉框了：
10.3.4 定义一个display的样式
.noDisplay{
display: none;
}10.3.4 js代码
获取到属性nginx_select_right的位置进行对应操作
let fun_nginx_sw = function (){
let switch_web = document.getElementsByClassName('nginx_select_right')[0];
// console.log(switch_web);
if (nginx_sw.value == false) {
switch_web.classList.add('noDisplay');
}else {
switch_web.className = 'nginx_select_right';
}
}备注：其他功能也差不多使用这种方式实现，就不再一一描述了。
十一、生产部署
11.1 编译代码
PS D:\gitee\deploy\vue\oneinstack> npm install
PS D:\gitee\deploy\vue\oneinstack> npm run build
11.2 将dist包拷贝至服务器上
root@VM-12-8-ubuntu:/data/wwwroot# mv /tmp/dist auto.g6p.cn
root@VM-12-8-ubuntu:/data/wwwroot# chown -R www. auto.g6p.cn
root@VM-12-8-ubuntu:/data/wwwroot# ls auto.g6p.cn/ -al
11.3 nginx配置文件
root@VM-12-8-ubuntu:/usr/local/openresty/nginx/conf/vhost# cat auto.g6p.cn.conf
11.4 站点访问
网站访问地址：https://auto.g6p.cn/
源码访问地址：https://gitee.com/xiangys0134/deploy/blob/master/vue/oneinstack/src/App.vue
留言