찾다
백엔드 개발PHP 튜토리얼Vue 모듈화 기반 백엔드 시스템 개발 - 프로젝트 빌드

Vue 모듈화 기반 백엔드 시스템 개발 - 프로젝트 빌드

Mar 30, 2018 pm 01:56 PM
무대 뒤에서모듈식체계

이 기사는 Vue 모듈화를 기반으로 한 백엔드 시스템 개발에 대해 공유합니다. 관심 있는 친구들은 이 기사를 살펴볼 수 있습니다.

기사 디렉토리는 다음과 같습니다:
Vue 모듈화를 기반으로 한 백엔드 시스템 개발 - 준비 작업
기반 on vue 모듈식 개발 백엔드 시스템 - 프로젝트 구축

머리말

이전 기사에서 언급한 준비 도구에 익숙해지면 이제 자신만의 프로젝트 구축을 시작하세요. 이것은 VUE 프로젝트이므로 vue-cli를 사용하여 구축하세요. .다음 명령어를 입력하세요

vue init webpack xxxx

빌드 과정에서 앞서 언급한 것처럼 코드를 표준화해야 하므로 eslint 질문에 Y를 답해야 합니다. 모든 것이 끝나면 디렉터리 구조를 살펴보겠습니다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: '../../'

프로젝트 디렉터리 구조

물론 이 디렉터리에 일부 추가 사항이 추가되었으며 (추가)라는 메모가 작성되었습니다. 메모가 없는 것도 똑같습니다

rrreee

먼저 node_modules 폴더가 보이지 않으면 걱정하지 말고 아래를 살펴보고 api를 추가하세요. 지시어, 모의, 페이지, 저장 이 폴더에는 각각의 기능이 있습니다

  1. api:
    스토리지 프로젝트 시뮬레이션 인터페이스
  2. 지시어:

    Storage 프로젝트 전역 명령

  3. mock: mock.js

  4. pages를 사용하여 시뮬레이션된 스토리지 데이터 : 스토리지 프로젝트 관련 페이지

  5. store: 스토리지 상태 관리🎜
🎜이 글을 읽고 나면 사실 별 내용이 없습니다. package.json🎜🎜package.json🎜🎜이 파일은 NPM에서 프로젝트 패키지를 관리하는 데 사용됩니다. 🎜이 파일을 열고 devDependency 속성을 ​​찾으세요. 여기서 프로젝트에 필요한 패키지를 추가합니다. 예: 🎜
  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"//양식 유효성 검사 도구🎜
🎜있는 경우 이렇게 파일이 구성됐는데, 다음 명령어를 직접 입력해 보세요🎜rrreee🎜 이렇게 입력하면 다운로드가 엄청 느리다는 걸 알 수 있죠. 왜일까요? 다운받은 패키지가 해외에서 온 것일 수도 있으니~~ 타오바오 미러를 아래와 같이 추가합니다🎜rrreee🎜물론 하나씩 추가하면 저는 보통 패키지 버전을 먼저 확인합니다 .때때로 일부 패키지는 베타 버전이기 때문에 명령은 다음과 같습니다: 🎜rrreee🎜 그런 다음 다음 명령을 입력하십시오: 🎜rrreee🎜이때 우리는 차 한 잔만 마시고 조용히 잘 생긴 남자 또는 아름다운 소녀가 되어야 합니다~~ 다운로드가 완료되면 node_modules 폴더를 볼 수 있습니다. 🎜🎜🎜개인 수정, 참고용입니다🎜🎜🎜위 단계를 완료한 후에도 구성을 수정해야 합니다. 🎜🎜🎜포트 수정🎜🎜🎜먼저 config 디렉터리를 찾은 다음 index.js 파일을 찾고 dev에 있는 구성 항목을 엽니다. >, 기본 포트는 8080이므로 다른 프로젝트와의 포트 충돌을 방지하기 위해 포트 옵션을 찾아 원하는 포트로 변경하세요🎜🎜🎜브라우저는 Project 실행 후 자동으로 열기🎜🎜🎜위와 같이 dev 구성 항목을 찾은 다음 autoOpenBrowser를 찾습니다. 기본값은 false입니다. 이제 로 변경합니다. 코드>. 🎜🎜🎜패키징 후 리소스 로딩 문제🎜🎜🎜패키징 후 사진과 스타일이 나오지 않는 문제로 혹시 같은 문제가 있으신지 모르겠어서 다음과 같이 수정했습니다. 🎜🎜config 이 디렉터리에서 index.js 파일을 찾아 build에 있는 구성 항목을 열고 assetsPublicPath: './'를 추가합니다. 🎜🎜 그런 다음 build에서 디렉터리에서 utils.js 파일을 찾은 후 다음 코드를 찾습니다. 🎜rrreee🎜Add publicPath: '../ ../' 구성 항목에 🎜🎜🎜Summary🎜🎜🎜 이 부분은 참고용으로만 보시고, 같은 문제가 발생하면 일단 무시하셔도 됩니다. 프로젝트 건설을 방해하지 않습니다. 빌드가 완료되면 코딩을 시작하겠습니다! 🎜🎜🎜Article🎜🎜Vue 모듈화 기반 백엔드 시스템 개발 - 준비작업 🎜Vue 모듈화 기반 백엔드 시스템 개발 - 프로젝트 구축🎜🎜관련 추천 : 🎜🎜🎜vue2.0 Axios Cross에서 주의해야 할 점 -도메인 및 렌더링? 🎜🎜🎜🎜모바일 측에서 관성 슬라이딩 및 리바운드 Vue 탐색 모음을 구현하는 방법🎜🎜🎜🎜vue 프로젝트가 패키징된 후 새로 고침 404를 처리하는 방법🎜🎜

위 내용은 Vue 모듈화 기반 백엔드 시스템 개발 - 프로젝트 빌드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
PHP의 지속적인 사용 : 지구력의 이유PHP의 지속적인 사용 : 지구력의 이유Apr 19, 2025 am 12:23 AM

여전히 인기있는 것은 사용 편의성, 유연성 및 강력한 생태계입니다. 1) 사용 편의성과 간단한 구문은 초보자에게 첫 번째 선택입니다. 2) 웹 개발, HTTP 요청 및 데이터베이스와의 우수한 상호 작용과 밀접하게 통합되었습니다. 3) 거대한 생태계는 풍부한 도구와 라이브러리를 제공합니다. 4) 활성 커뮤니티와 오픈 소스 자연은 새로운 요구와 기술 동향에 맞게 조정됩니다.

PHP 및 Python : 유사점과 차이점을 탐구합니다PHP 및 Python : 유사점과 차이점을 탐구합니다Apr 19, 2025 am 12:21 AM

PHP와 Python은 웹 개발, 데이터 처리 및 자동화 작업에 널리 사용되는 고급 프로그래밍 언어입니다. 1.PHP는 종종 동적 웹 사이트 및 컨텐츠 관리 시스템을 구축하는 데 사용되며 Python은 종종 웹 프레임 워크 및 데이터 과학을 구축하는 데 사용됩니다. 2.PHP는 Echo를 사용하여 콘텐츠를 출력하고 Python은 인쇄를 사용합니다. 3. 객체 지향 프로그래밍을 지원하지만 구문과 키워드는 다릅니다. 4. PHP는 약한 유형 변환을 지원하는 반면, 파이썬은 더 엄격합니다. 5. PHP 성능 최적화에는 Opcache 및 비동기 프로그래밍 사용이 포함되며 Python은 Cprofile 및 비동기 프로그래밍을 사용합니다.

PHP와 Python : 다른 패러다임이 설명되었습니다PHP와 Python : 다른 패러다임이 설명되었습니다Apr 18, 2025 am 12:26 AM

PHP는 주로 절차 적 프로그래밍이지만 객체 지향 프로그래밍 (OOP)도 지원합니다. Python은 OOP, 기능 및 절차 프로그래밍을 포함한 다양한 패러다임을 지원합니다. PHP는 웹 개발에 적합하며 Python은 데이터 분석 및 기계 학습과 같은 다양한 응용 프로그램에 적합합니다.

PHP와 Python : 그들의 역사에 깊은 다이빙PHP와 Python : 그들의 역사에 깊은 다이빙Apr 18, 2025 am 12:25 AM

PHP는 1994 년에 시작되었으며 Rasmuslerdorf에 의해 개발되었습니다. 원래 웹 사이트 방문자를 추적하는 데 사용되었으며 점차 서버 측 스크립팅 언어로 진화했으며 웹 개발에 널리 사용되었습니다. Python은 1980 년대 후반 Guidovan Rossum에 의해 개발되었으며 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

phphassignificallyimpactedwebdevelopmentandextendsbeyondit

스칼라 유형, 반환 유형, 노조 유형 및 무효 유형을 포함한 PHP 유형의 힌트 작업은 어떻게 작동합니까?스칼라 유형, 반환 유형, 노조 유형 및 무효 유형을 포함한 PHP 유형의 힌트 작업은 어떻게 작동합니까?Apr 17, 2025 am 12:25 AM

PHP 유형은 코드 품질과 가독성을 향상시키기위한 프롬프트입니다. 1) 스칼라 유형 팁 : PHP7.0이므로 int, float 등과 같은 기능 매개 변수에 기본 데이터 유형을 지정할 수 있습니다. 2) 반환 유형 프롬프트 : 기능 반환 값 유형의 일관성을 확인하십시오. 3) Union 유형 프롬프트 : PHP8.0이므로 기능 매개 변수 또는 반환 값에 여러 유형을 지정할 수 있습니다. 4) Nullable 유형 프롬프트 : NULL 값을 포함하고 널 값을 반환 할 수있는 기능을 포함 할 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구