基于vue模块化开发后台系统——构建项目

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于vue模块化开发后台系统——构建项目相关的知识,希望对你有一定的参考价值。

文章目录如下:
项目效果预览地址
项目开源代码
基于vue模块化开发后台系统——准备工作
基于vue模块化开发后台系统——构建项目
基于vue模块化开发后台系统——权限控制

前言

在熟悉上一篇说到准备工具之后,现在开始构建属于自己的项目,这是一个VUE的项目,那么使用vue-cli来构建,输入以下命令

vue init webpack xxxx

在构建过程中,因为之前说的要规范代码,因此在eslint这个提问中,要回复Y。等一切都结束后,我们来看看目录结构

项目目录结构

当然这个目录添加了一些,已经做了备注(加),没备注的就是一样的

├── build                      // 构建相关??
├── config                     // 配置相关
├── dist                       // 打包之后相关
├── node_modules               // npm相关包
├── src                        // 代码
│?? ├── api                    // 请求接口文件(加)
│?? ├── assets                 // 静态资源(图片,样式等)
│?? ├── components             // 全局公用组件
│?? ├── directives             // 全局指令(加)
│?? ├── mock                   // 项目mock 模拟数据(加)
│?? ├── pages                  // 相关页面(加)
│?? ├── router                 // 路由
│?? ├── store                  // store管理(加)
│?? ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
├── .babelrc                   // babel-loader 配置
├── .eslintignore              // eslint 忽略项
├── .eslintrc.js               // eslint 配置项
├── .postcssrc.js              // postcss 配置项
├── .gitignore                 // git 忽略项
├── index.html                 // html模板
└── package.json               // package.json

先分析下这些,如果你没有看见node_modules文件夹,暂时不用管先,接着往下看,依次添加api,directives,mock,pages,store这几个文件夹,分别的作用

  1. api:存放项目模拟的接口
  2. directives:存放项目全局指令
  3. mock:存放使用mock.js模拟的数据
  4. pages:存放项目相关的页面
  5. store:存放状态管理

看完这些,其实也没啥好看的,这些都可以随便命名,你爱咋滴就咋滴,接下来就说说package.json

package.json

这是NPM用来管理项目包的文件。
打开这个文件,找到devDependencies这个属性,我们在里面添加项目所需要的包,例如:

  1. "axios": "^0.17.0",//请求工具
  2. "js-cookie": "^2.2.0",//cookie
  3. "lodash": "^4.17.4",//函数库
  4. "mockjs": "^1.0.0",//模拟数据工具
  5. "vuex": "^3.0.1",//状态管理工具
  6. "vee-validate": "^2.0.0"//表单验证工具

如果你的这个文件已经配置好了,那么直接输入以下命令

npm install --save-dev

当你这样输入的话,你会发现下载非常非常的慢,为啥呢?因为你下载的包可能是在国外,所以呢~~我们加上淘宝镜像,如下

npm install --save-dev --registry=http://registry.npm.taobao.org

当然,如果你是一个个添加的话,我一般先查看这个包的版本,因为有时候有些包是beta版的,命令如下:

npm show 包名或者插件名称 versions --json

再然后输入下面这个命令:

npm install 包名或者插件名称@版本 --save-dev --registry=http://registry.npm.taobao.org

这时候我们只需要喝杯茶,安静的做个美男子或美少女就可以了~~当下载完成后就可以看见node_modules文件夹了

个人修改,仅供参考

完成以上步骤之后,还需要修改一下配置。

修改端口

先找到config这个目录,然后找到index.js这个文件,打开找到dev的配置项,由于默认的端口是8080,为了防止跟其它项目的端口冲突,找到port这个选项,修改成自己喜欢的端口

运行后浏览器自动打开项目

跟上面一样找到dev配置项,然后找到autoOpenBrowser,默认是false,现在改成true

打包后加载资源问题

由于在打包后,出现图片和样式不出来的问题,不知道你们是否也这样,进行了以下修改:

config这个目录下找到index.js这个文件,打开找到build的配置项,添加assetsPublicPath: ‘./‘

然后在build目录下找到utils.js这个文件,然后找到以下代码:

return ExtractTextPlugin.extract({
    use: loaders,
    fallback: ‘vue-style-loader‘,
  })

在配置项中添加publicPath: ‘../../‘

总结

仅供参考这部分,如果你们可以暂时忽略,出现了同样的问题再倒回来看也是可以的,不妨碍构建项目。构建完成,那么就开始撸代码了!

文章
项目效果预览地址
项目开源代码
基于vue模块化开发后台系统——准备工作
基于vue模块化开发后台系统——构建项目
基于vue模块化开发后台系统——权限控制












以上是关于基于vue模块化开发后台系统——构建项目的主要内容,如果未能解决你的问题,请参考以下文章

基于PHP语言Laravel9+Vue+ElementUI后台代码生成工具

基于ThinkPhp6+Vue+AntDesign通用后台管理系统

基于Laravel9+Vue+ElementUI实现的后台管理系统

基于Laravel9+Vue+ElementUI的电商后台管理系统

基于Laravel9+Vue+ElementUI的小程序后台管理系统

PHP基于Laravel9+Vue+ElementUI的后台管理系统