您现在的位置是:首页 > 前端学习 > VueVue

从0开发一个后台管理系统(第一节)(图文)

第十三双眼睛2022-04-29【Vue】人已围观

简介从0开发一个后台管理系统

1:使用vue-cli创建项目
输入 vue --version 检测是否安装vue-cli插件,如果没有安装,可以运行命令 npm install --global @vue/cli 进行安装
安装好以后,进入要创建项目的目录,打开命令行,输入vue create 项目名称
如: vue create xingchen-ui
弹出下面的框:

选择手动的方式,然后回车,弹出下面的框,按下图进行选择

选择完毕后,按回车,弹出下面的框,选择vue2

回车,然后选择非history模式,然后回车

然后选择less,然后回车,代码校验格式选择第三个,ESLint + stand config

点击回车后,选择何时触发代码规范校验,建议两种方式都勾选

按回车后,提示配置文件放在哪里,建议选第一个,生成独立的配置文件。
最后选择不保存配置文件,然后回车。就开始生成项目结构了。
项目结构生成完成以后,进入项目目录,执行npm run serve 命令启动项目
输入localhost:8080就可以访问了。

调整目录结构
将默认生成的文件进行删除
主要包括如下:
App.vue
router/index.js
删除views下的组件,components下的组件
创建api,util,style目录
<template>
  <div id="app">
    <h1>星辰后台管理系统</h1>
    <router-view/>
  </div>
</template>

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

<style lang="less">

</style>
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  routes
})

export default router







 

Tags:

很赞哦! ()

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计153篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们