이 기사는 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
这是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를 추가하세요. 지시어, 모의, 페이지, 저장 이 폴더에는 각각의 기능이 있습니다
지시어:
Storage 프로젝트 전역 명령mock.js
devDependency 속성을 찾으세요. 여기서 프로젝트에 필요한 패키지를 추가합니다. 예: 🎜타오바오 미러를 아래와 같이 추가합니다🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
