Vue.js 是一个目前比较流行的前端框架，目前比较流行和 Vue 搭配的 UI组件有Element-UI、iview、Bootstrap-Vue、Ant-Design-Vue，另外还有Vuetify、Buefy （Bulma css）、Vue Material 等等。基于这些组件库封装的后台管理模板。

本文主要讲解选取其一作为示例案例，分析其目录结构方便理解项目源码，IDEA、PyCharm中查看并运行VUE项目，以及命令行执行VUE项目等相关的方法。

1、选取后台管理系统模板

1.1 vue-manage-system (16.1k)

Vue-Manage-System （github上的标星数为16.1K）该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 Vue.js ，使用 Vue-Cli3.0 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。

集成方案：https://github.com/lin-xin/vue-manage-system
预览地址：vue-manage-system

1.2 预览效果

1.3 安装步骤


// 把模板下载到本地
git clone https://github.com/lin-xin/vue-manage-system.git      
 
// 进入模板目录
cd vue-manage-system   
 
// 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn 
npm install         
 
// 运行
npm run dev
 
// 执行构建命令，生成的dist文件夹放在服务器下即可访问
npm run build
 
// 更多信息从原github地址获取

2、项目初始化

2.1 初始化目录结构

通过上述步骤1.3完成项目的克隆和下载到本地调试启动项目

2.2 目录结构说明


1.安装新的包
    安装新包命令：npm install 
    启动服务：npm run dev
    构建成后端可用的静态资源：
    1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true（true代表打包环境是开发环境，可以进行调试；false表示生产环境，正式上线的）
    2.在cmd里面运行npm run build(运行的是build里面的build.js文件)生成的包放在dist下面即可前端单独调试使用
    3、构建成的静态资源要放在python的一个目录下，在app.py中设置启动静态资源页面index.html（下载python项目在里面设置好）
 
2. 目录解析：
    build         项目构建使用依赖包，不用看
    dist          vue项目构建之后静态资源存储目录，构建成功后把里面的内容放在python项目中
    node_modules   npm加载的依赖模块，底层要用               
    public         公共文件存储，可以放静态数据的json文件等
    screenshots    公共图片资源等
    src  我们要开发的目录，基本上要做的事情都在这个目录里。里面包括几个目录及文件：
      src/api/index.js 接口配置文件，访问后端接口配置在此处，如果接口不多也可以单独写在业务文件中，为了方便管理一般统一写在此处
      src/assets 基础设置，主要是css样式文件
      src/baylorTest 做列表的时候可以看下，包括分页效果等都有
      src/components 下面放置的是页面框架部分，主要是页面头部、菜单栏、页签等
      src/plugins 页面元素配置不用管
      src/router/index.js  页面路由配置，页面跳转路由，默认页面路由设置，菜单各个页面路由配置，需要详细看并根据情况增减
      src/views 所有具体业务页面文件，所有添加的页面都可以放在此文件夹内，目前页面不多没有具体分目录都放在此处了
      src/app.vue 项目入口文件，我们可以把组件写在这里，而不是用components目录
      src/main.js  页面主要的js，主要是按需加载最基础的文件 
 
    .babelrc:用来设置转码规则presets和插件plugins
    .editorconfig:用来配置编码规则
    .gitignore:过滤，向git提交代码时不需要提交
    .postcssrc.js：用来兼容浏览器
    package.json    项目的包管理文件，描述了项目依赖的vou系统包，以及项目的版本信息
    vite.config.js  配置目录，包括端口号等
    index.html:首页入口文件
 
3. 访问接口地址：
    src/api/index 中

2.3 IDEA编译器中查看vue项目代码

2.3.1 在IDEA中打开Settings

2.3.2 搜索Vue.js插件并进行下载安装

2.3.3 安装完成并勾选后点击Apply

2.3.4 重启IDEA

检查Vue插件即配置成功，上述列举IDEA配置方法，PyCharm也类似自行尝试

2.4 PyCharm 编译器中运行vue项目配置方法

2.4.1 PyCharm配置vue npm命令启动项目

1、PyCharm运行项目出点击 Edit Configurations...

2、弹窗界面点击 + 号

3、选择npm方式运行，弹出步骤4的界面

4、配置项目信息，如名称、package.json路径，运行命令和环境，选择node和npm环境

5、点击运行启动vue项目

6、查看控制台是否启动成功

2.4.2 查看项目控制台信息vue项目是否启动成功

PS: 项目运行前记得手动敲命令安装vue依赖包

...

2.4.3 打开链接地址访问

2.5 服务端部署方法

2.5.1 部署步骤

1、拉取代码

2、清理目录

3、安装依赖

4、项目编译

2.5.2 部署脚本


cd  /vue-manage-system/
echo  '拉取最新代码'
 
git reset --hard
git pull
 
echo '清理npm缓存'
npm cache clean --force
 
echo '清理dist目录'
rm -rf dist/* 
 
echo '清理node_modules目录'
#rm -rf node_modules
rm -rf package-lock.json
 
echo '安装依赖'
cnpm install --legacy-peer-deps
 
echo '项目编译 ... '
npm run build
 
cp -fr /vue-manage-system/dist/*  /vue-manage-system/WebService/

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/502831

Vue（二） 后台管理系统模板推荐 项目初始化与编译器调试_vue后台项目模板

前言