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

이 기사는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!