Vue.js 프로젝트 템플릿을 사진 및 텍스트와 공유하는 방법-JS 튜토리얼-php.cn

이 기사에서는 주로 Vue.js 프로젝트 템플릿을 구축하는 방법에 대한 그래픽 튜토리얼을 제공합니다. 참고자료를 하나 드릴께요. 도움이 되셨으면 좋겠습니다.

머리말

저희 팀은 올해(2017년) 초부터 모바일 제품 개발을 위해 "Vue.js"를 도입하기 시작했습니다. 팀의 리더로서 제가 가장 먼저 하는 일은 전체 아키텍처를 설계하는 것입니다. 좋은 아키텍처는 풍부한 개발 경험을 바탕으로 구축되어야 합니다. 수년간의 프론트엔드 개발 경험이 있지만 "Vue.js"는 아직 낯설습니다. 다행스럽게도 "Vue.js"에는 상대적으로 성숙한 프로젝트 템플릿을 제공하는 지원 도구인 "Vue-CLI"가 있어 시작의 어려움이 크게 줄어듭니다. 그러나 여전히 많은 구체적인 문제를 스스로 생각하고 해결해야 합니다.

프로젝트 구분

저희 회사 H5 제품의 대부분은 모바일 클라이언트에 중첩된 페이지입니다. 각 프로젝트의 기능은 상대적으로 독립적이고 규모가 작습니다. 이러한 방식으로 이러한 소규모 프로젝트를 독립적으로 관리할 수도 있고 중앙 집중화하여 하나의 대규모 프로젝트로 관리할 수도 있습니다. 각각의 장단점은 다음과 같습니다.

프로젝트 템플릿 우리 팀이 "Vue.js"를 이제 막 사용하기 시작했다는 점을 고려하면 점차적으로 적합한 아키텍처를 찾아야 합니다. 대규모 프로젝트가 된다면 일단 구조를 조정해야 하기 때문에 부담이 될 가능성이 높습니다. 따라서 최종 선택은 여러 개의 작은 프로젝트로 나누는 것입니다.

여러 개의 소규모 프로젝트로 나누어지더라도 이러한 소규모 프로젝트 역시 일관된 아키텍처와 공통 코드를 유지해야 합니다. 직설적으로 말하면 비즈니스 상황에 따라 자신만의 프로젝트 템플릿을 구축해야 하며, 모든 특정 프로젝트는 이 템플릿을 기반으로 개발됩니다. 우리 팀의 프로젝트 템플릿을 구축하는 과정을 소개하겠습니다.

초기화

프로젝트 템플릿 자체도 프로젝트이므로 "Vue-CLI"(프로젝트 이름은 "webapp-public")를 통해 초기화됩니다.

vue init webpack webapp-public

로그인 후 복사

여기에서 "webpack" 템플릿을 선택한 이유는 비교적 완전한 기능을 가지고 있습니다. 초기화 과정에서 다음 사항에 유의하세요.

단일 페이지 애플리케이션을 지원하려면 "Vue-Router"를 설치하세요.

코딩 표준을 통합하려면 "ESLint"를 설치하세요.

SASS

"SASS" 지원 설치는 비교적 간단합니다. 먼저 명령줄을 통해 관련 종속성을 설치합니다.

npm install node-sass --save-devnpm install sass-loader --save-dev

로그인 후 복사

설치 후 스타일 태그의 "lang" 속성을 "scss"로 지정하면 됩니다. 이 언어의 스타일 코드:

<style lang="scss" scoped></style><style src="style.scss" lang="scss"></style>

로그인 후 복사

REM 레이아웃

현재 대부분의 모바일 페이지는 다양한 크기의 휴대폰 화면에 적응하기 위해 스타일 코드의 크기 단위로 rem을 사용합니다. 하지만 디자이너가 제공하는 디자인 초안은 여전히 px 단위입니다. 이를 위해서는 px를 rem으로 변환해야 합니다. 이 변환은 헤드에서 수행하거나 "PostCSS" 플러그인 "postcss-px2rem"과 같은 도구를 통해 수행할 수 있습니다.

프로젝트 초기화 시 "PostCSS"가 이미 설치되어 있으므로 "postcss-px2rem"을 직접 설치하면 됩니다.

npm install postcss-px2rem --save-dev

로그인 후 복사

설치 후 프로젝트 루트 디렉터리의 ".postcssrc.js"를 수정하고 추가하면 됩니다. " Postcss-px2rem" 구성:

"plugins": { 
 "autoprefixer": {}, 
 "postcss-px2rem": { "remUnit": 100 }
}

로그인 후 복사

"px value/remUnit"은 변환된 rem 값입니다. 필요에 따라 "remUnit" 값을 수정할 수 있습니다.

그러나 일부 특수 px 값은 rem 값으로 변환할 필요가 없습니다. 이 경우 "postcss-px2rem"이 이 값을 처리하지 못하도록 특수 주석을 사용할 수 있습니다. 예:

/* 不同dpr下的细线 */
.g-dpr-1 .g-border-1px { 
 border-width: 1px !important; /*no*/
 }
 .g-dpr-2 .g-border-1px { 
 border-width: 0.5px !important; /*no*/
 }

로그인 후 복사

Vuex

단일 페이지 애플리케이션 개발에는 상태 관리를 담당하는 "Vuex"도 필요합니다. 설치도 매우 간단합니다.

npm install vuex --save

로그인 후 복사

그러나 실제로 사용하면 낮은 버전의 시스템을 사용하는 일부 브라우저에서는 다음과 같은 예외가 발생할 수 있습니다.

Error: [vuex] vuex는 이 브라우저에서 Promise 폴리필이 필요합니다.

이는 다음과 같습니다. 브라우저가 "Promise"를 지원하지 않기 때문에 "polyfill"이 필요합니다. "babel-polyfill"을 직접 사용할 수 있습니다:

npm install babel-polyfill --save

로그인 후 복사

"babel-polyfill"은 ES6의 전역 범위에 새로운 개체와 메서드를 추가하며 프로젝트의 다른 코드는 이를 명시적으로 도입(가져오기 또는 요구)할 필요가 없습니다. 이는 "Webpack"이 이를 프로젝트의 종속성으로 인식하지 않음을 의미합니다. 따라서 "/build/webpack.base.conf.js"도 수정하고 패키징 입구에 "babel-polyfill"을 추가해야 합니다.

entry: { 
 app: ['babel-polyfill', './src/main.js']
}

로그인 후 복사

또한 "를 사용할 때 기본적으로 설치된다는 점을 언급해야 합니다. Vue-CLI"를 사용하여 프로젝트를 초기화합니다. "babel-plugin-transform-runtime"이 설치되어 있으며 기능은 "babel-polyfill"과 동일하므로 전자를 제거할 수 있습니다. 루트 디렉터리에서 ".babelrc"를 수정하고 다음 줄을 제거합니다:

"plugins": ["transform-runtime"]

로그인 후 복사

그런 다음 종속성을 삭제합니다:

npm uninstall babel-plugin-transform-runtime --save-dev

로그인 후 복사

액세스 경로

각 작은 프로젝트는 실제로 서버에 있습니다(테스트, 시험판 또는 프로덕션 환경인지 여부) server ), 첫 번째 수준 하위 디렉터리로 구분됩니다.

이는 프로젝트의 모든 경로가 디렉터리와 함께 추가되어야 함을 의미합니다(예를 들어 원래 액세스 경로는 "http://localhost:8080/home"이었지만 이제는 "http:/"로 변경해야 함). / localhost:8080/project-a/home"). 이것이 매우 간단한 일이라고 생각하지 마십시오. 실제로 변경해야 할 사항이 많이 있습니다.

가장 먼저 변경해야 할 것은 "Vue-Router"의 기본 경로 구성입니다:

new Router({ 
 base: '/project-a/', // 基路径
 mode: 'history', 
 routes: [
 { path: '/', component: Home }
]
});

로그인 후 복사

기본 경로 설정 후 라우팅과 관련된 모든 경로는 루트 디렉터리가 아닌 상대 기본 경로입니다.

然后是开发服务器的资源发布路径（/config/index.js）：

dev: { assetsPublicPath: '/project-a/' }

로그인 후 복사

对应地还要修改「/build/dev-server.js」的两处地方，不然访问的时候就会404：

require('connect-history-api-fallback')({ 
 // 默认为"/index.html"，因为资源发布路径改了，所以这里也要对应上
 index: '/project-a/index.html'
 })
// 运行项目后默认打开的页面地址
var uri = 'http://localhost:' + port + '/project-a/'

로그인 후 복사

最后还要修改 Webpack热更新的检测路径。先修改「/build/dev-server.js」：

require('webpack-hot-middleware')(compiler, { 
 log: false, 
 path: '/project-a/__webpack_hmr'
 })

로그인 후 복사

然后修改「/build/dev-client.js」：

require('webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true&noInfo=true&reload=true')

로그인 후 복사

顺带一提，上面的这堆参数完全是用源代码调试的结果，官网文档并没有详细说明。

全部改完之后可以发现，跟目录有关的代码有5处，具体项目使用的时候岂不是要改5次？非常麻烦。这种情况下，把这部分逻辑写成一个公共函数去调用是最好的选择。新建文件「 /src/add-dirname.js 」：

const DIR_NAME = '/project-a/';
module.exports = function(path) { 
 return (DIR_NAME + path).replace(/\/{2,}/g, '/');
};

로그인 후 복사

然后把刚才涉及添加一级子目录的代码全部改成调用该函数来实现：

这样一来，如果要修改一级子目录，只需要修改常量「DIR_NAME」的值就可以了。

公共代码

我们的公共代码分为三种：

通用性较强的库：包括团队成员编写的一些通用库、无法通过npm安装的通用库等，跟业务无关；

业务逻辑库：跟业务有关，但是跟表现层无关的公共代码；

业务组件库：表现层的组件。

它们都位于「/src/public」：

在每一种公共代码的文件夹内，具体某一个库或者组件的目录结构如下：

/src/public/components/img-box

img-box.vue

1.1

这里要特别提一下的是版本号这一层文件夹。如果对库或者组件的修改会造成以前的调用代码不兼容，就不应该修改原文件，而是新建一个版本号文件夹，把新的代码以及其余的资源文件都放到这个新文件夹中。这样做的好处是，具体的项目要更新公共代码时，直接把项目模板的「/src/public」覆盖过去就行，不用担心不兼容。

构建

「webpack」这个项目模板已经配置好构建的逻辑。通过一个命令就可以执行构建：

npm run build

로그인 후 복사

根据默认配置，代码会被发布到项目根目录下的「dist」文件夹内。然而，这样简单粗暴的发布方式并不能满足实际需求：

资源文件（图片、CSS、JS等）要发布到 CDN服务器；

HTML中要通过完整的URL引用资源文件（因为资源文件在CDN的域上）；

不用的环境（测试、预发布、生产）使用不同的域访问。

先解决区分环境的问题，我们在构建命令中新增一个参数以表示环境：

npm run build <test|pre|prod>

로그인 후 복사

然后在根目录下新建一个配置文件「conf.json」（简单起见，只写了两种环境的配置）：

文件内容表示的分别是不同环境下的HTML文件发布路径、资源发布路径以及资源访问路径。

接下来就要把这些配置接入到「Webpack」的打包配置中。修改「/config/index.js」，先在开头加上：

var env = process.argv[2]; // 环境参数（从0开始的第二个）
var conf = require('../conf');
// 找出对应环境的配置conf.indexRoot = conf.indexRoots[env];
conf.assetsRoot = conf.assetsRoots[env];
conf.assetsPublicPath = conf.assetsPublicPaths[env];

로그인 후 복사

然后修改构建部分的代码：

build: { 
 index: path.resolve(__dirname, conf.indexRoot + 'index.html'),
 assetsRoot: path.resolve(__dirname, conf.assetsRoot),
 assetsPublicPath: conf.assetsPublicPath
}

로그인 후 복사

此时运行构建命令，就可以把项目发布到「conf.json」指定的路径中。

小结

至此，项目模板搭建完毕。其实最重要的一点就是可配置化，否则，开发具体项目的人初始化一个项目还要改十几个地方，效率就很低了。

项目模板的使用

项目模板已经搭建好了，但是怎么用呢？有两种常用场景：

初始化新项目：克隆或拉取项目模板项目，复制该项目的所有文件（除了「.git」文件夹）到新项目的文件夹，修改配置后进行后续开发。

更新公共代码：克隆或拉取项目模板项目，复制要更新的代码到目标项目的对应路径。

两种场景都离不开「克隆或拉取」、「复制和粘贴」，这种做法一是麻烦，二是逼格太低。所以后来我用Node.js写了一个命令行工具「webapp-cli」来完成这两项工作。

初始化项目的命令为：

webapp init [projectPath]

로그인 후 복사

例如：

webapp init test

로그인 후 복사

更新特定文件的命令为：

webapp update <fileGlobs> [projectPath]

로그인 후 복사

例如：

webapp update /src/public/** test

로그인 후 복사

这个工具并没有改变操作方式，只是由人工操作变成程序代劳。