이 기사는 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
这几个文件夹,分别的作用
api:存放项目模拟的接口
directives:存放项目全局指令
mock:存放使用
mock.js
模拟的数据pages:存放项目相关的页面
store:存放状态管理
看完这些,其实也没啥好看的,这些都可以随便命名,你爱咋滴就咋滴,接下来就说说package.json
package.json
这是NPM用来管理项目包的文件。
打开这个文件,找到devDependencies
这个属性,我们在里面添加项目所需要的包,例如:
"axios": "^0.17.0",//请求工具
"js-cookie": "^2.2.0",//cookie
"lodash": "^4.17.4",//函数库
"mockjs": "^1.0.0",//模拟数据工具
"vuex": "^3.0.1",//状态管理工具
"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를 추가하세요. 지시어, 모의, 페이지, 저장
이 폴더에는 각각의 기능이 있습니다
-
api:
스토리지 프로젝트 시뮬레이션 인터페이스
-
지시어:
Storage 프로젝트 전역 명령 -
mock:
mock.js
- pages를 사용하여 시뮬레이션된 스토리지 데이터 : 스토리지 프로젝트 관련 페이지
- store: 스토리지 상태 관리🎜
devDependency
속성을 찾으세요. 여기서 프로젝트에 필요한 패키지를 추가합니다. 예: 🎜- 🎜"axios" : "^0.17.0",//도구 요청🎜
- 🎜"js-cookie": "^2.2.0",//Cookie🎜
- 🎜"lodash": " ^4.17.4",//함수 라이브러리🎜
- 🎜"mockjs": "^1.0.0",//시뮬레이션 데이터 도구🎜
- 🎜"vuex": " ^ 3.0.1",//상태 관리 도구🎜
- 🎜"vee-validate": "^2.0.0"//양식 유효성 검사 도구🎜
타오바오 미러
를 아래와 같이 추가합니다🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

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

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

PHP는 1994 년에 시작되었으며 Rasmuslerdorf에 의해 개발되었습니다. 원래 웹 사이트 방문자를 추적하는 데 사용되었으며 점차 서버 측 스크립팅 언어로 진화했으며 웹 개발에 널리 사용되었습니다. Python은 1980 년대 후반 Guidovan Rossum에 의해 개발되었으며 1991 년에 처음 출시되었습니다. 코드 가독성과 단순성을 강조하며 과학 컴퓨팅, 데이터 분석 및 기타 분야에 적합합니다.

PHP는 웹 개발 및 빠른 프로토 타이핑에 적합하며 Python은 데이터 과학 및 기계 학습에 적합합니다. 1.PHP는 간단한 구문과 함께 동적 웹 개발에 사용되며 빠른 개발에 적합합니다. 2. Python은 간결한 구문을 가지고 있으며 여러 분야에 적합하며 강력한 라이브러리 생태계가 있습니다.

PHP는 현대화 프로세스에서 많은 웹 사이트 및 응용 프로그램을 지원하고 프레임 워크를 통해 개발 요구에 적응하기 때문에 여전히 중요합니다. 1.PHP7은 성능을 향상시키고 새로운 기능을 소개합니다. 2. Laravel, Symfony 및 Codeigniter와 같은 현대 프레임 워크는 개발을 단순화하고 코드 품질을 향상시킵니다. 3. 성능 최적화 및 모범 사례는 응용 프로그램 효율성을 더욱 향상시킵니다.

phphassignificallyimpactedwebdevelopmentandextendsbeyondit

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


핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

드림위버 CS6
시각적 웹 개발 도구
