创建vue项目的几种方法

几乎都需要安装vue脚手架,各方法间大同小异,本文目的是做个记录!

1.使用可视化插件vue ui创建 打开终端输入vue ui进入图形化管理直接操作创建

2.使用vue create创建,打开终端输入vue create +(项目名称)即可创建

3.使用vue init webpack创建,打开终端输入vue init webpack+(项目名称)即可创建

4.使用vite工具,打开终端输入 npm init vue@latest 或者 npm init vite-app +( 项目名) 或者

        npm init vite@latest 进行创建

5.使用vite构建工具创建,需要装vite构建工具,

        打开终端输入npm install -g create-vite-app

        之后create-vite-app +(项目名称)

这样能创建一个框架,之后需要router,vuex之类的再自行安装即可!

详情可参考其他博主的详细流程!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用Vue的组件化思想,结合Element UI库快速创建一个左侧导航栏。 首先安装Element UI: ``` npm install element-ui -S ``` 然后在Vue组件中引入Element UI的Menu组件,代码如下: ``` <template> <div> <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <el-menu-item index="/home"> <i class="el-icon-s-home"></i> <span slot="title">首页</span> </el-menu-item> <el-submenu index="/components"> <template slot="title"> <i class="el-icon-s-tools"></i> <span>组件</span> </template> <el-menu-item index="/components/button">Button</el-menu-item> <el-menu-item index="/components/input">Input</el-menu-item> </el-submenu> <el-menu-item index="/about"> <i class="el-icon-s-promotion"></i> <span slot="title">关于</span> </el-menu-item> </el-menu> </div> </template> <script> export default { methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } }; </script> <style> .el-menu-vertical-demo { width: 200px; } </style> ``` 上述代码中,我们使用了`el-menu`、`el-menu-item`、`el-submenu`三个Element UI的组件,分别表示导航栏、导航项和子菜单。我们可以根据需要自定义图标、标题和路由路径。 其中,`default-active`属性用于设置当前选中的导航项,可以使用Vue的路由`$route`对象的`path`属性来获取当前路由路径。`handleOpen`和`handleClose`两个方法分别表示打开和关闭子菜单时的回调函数,可以根据需要自定义。 最后,我们在组件中引入样式,可以根据需要自定义导航栏的宽度和其他样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值