搜索
首页后端开发php教程基于vue模块化开发后台系统——构建项目

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

Mar 30, 2018 pm 01:56 PM
后台模块化系统

本篇文章和大家分享的是基于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模块化开发后台系统——构建项目

相关推荐:

vue2.0 axios跨域和渲染有哪些需要注意的

移动端的惯性滑动&回弹Vue导航栏如何实现

vue项目打包后刷新404怎么处理

以上是基于vue模块化开发后台系统——构建项目的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
PHP和Python:解释了不同的范例PHP和Python:解释了不同的范例Apr 18, 2025 am 12:26 AM

PHP主要是过程式编程,但也支持面向对象编程(OOP);Python支持多种范式,包括OOP、函数式和过程式编程。PHP适合web开发,Python适用于多种应用,如数据分析和机器学习。

PHP和Python:深入了解他们的历史PHP和Python:深入了解他们的历史Apr 18, 2025 am 12:25 AM

PHP起源于1994年,由RasmusLerdorf开发,最初用于跟踪网站访问者,逐渐演变为服务器端脚本语言,广泛应用于网页开发。Python由GuidovanRossum于1980年代末开发,1991年首次发布,强调代码可读性和简洁性,适用于科学计算、数据分析等领域。

在PHP和Python之间进行选择:指南在PHP和Python之间进行选择:指南Apr 18, 2025 am 12:24 AM

PHP适合网页开发和快速原型开发,Python适用于数据科学和机器学习。1.PHP用于动态网页开发,语法简单,适合快速开发。2.Python语法简洁,适用于多领域,库生态系统强大。

PHP和框架:现代化语言PHP和框架:现代化语言Apr 18, 2025 am 12:14 AM

PHP在现代化进程中仍然重要,因为它支持大量网站和应用,并通过框架适应开发需求。1.PHP7提升了性能并引入了新功能。2.现代框架如Laravel、Symfony和CodeIgniter简化开发,提高代码质量。3.性能优化和最佳实践进一步提升应用效率。

PHP的影响:网络开发及以后PHP的影响:网络开发及以后Apr 18, 2025 am 12:10 AM

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip

PHP类型提示如何起作用,包括标量类型,返回类型,联合类型和无效类型?PHP类型提示如何起作用,包括标量类型,返回类型,联合类型和无效类型?Apr 17, 2025 am 12:25 AM

PHP类型提示提升代码质量和可读性。1)标量类型提示:自PHP7.0起,允许在函数参数中指定基本数据类型,如int、float等。2)返回类型提示:确保函数返回值类型的一致性。3)联合类型提示:自PHP8.0起,允许在函数参数或返回值中指定多个类型。4)可空类型提示:允许包含null值,处理可能返回空值的函数。

PHP如何处理对象克隆(克隆关键字)和__clone魔法方法?PHP如何处理对象克隆(克隆关键字)和__clone魔法方法?Apr 17, 2025 am 12:24 AM

PHP中使用clone关键字创建对象副本,并通过\_\_clone魔法方法定制克隆行为。1.使用clone关键字进行浅拷贝,克隆对象的属性但不克隆对象属性内的对象。2.通过\_\_clone方法可以深拷贝嵌套对象,避免浅拷贝问题。3.注意避免克隆中的循环引用和性能问题,优化克隆操作以提高效率。

PHP与Python:用例和应用程序PHP与Python:用例和应用程序Apr 17, 2025 am 12:23 AM

PHP适用于Web开发和内容管理系统,Python适合数据科学、机器学习和自动化脚本。1.PHP在构建快速、可扩展的网站和应用程序方面表现出色,常用于WordPress等CMS。2.Python在数据科学和机器学习领域表现卓越,拥有丰富的库如NumPy和TensorFlow。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器