laravel 5.4+vue+vux+element 환경 매칭 단계에 대한 자세한 설명

이번에는 laravel 5.4+vue+vux+element 환경 매칭 단계에 대해 자세히 설명하겠습니다. laravel 5.4+vue+vux+element 환경 매칭의 주의사항은 무엇인가요? 바라보다.

머리말

최근 프로젝트의 요구로 인해 이러한 환경에 맞춰야 하는 상황이 되었습니다. 제가 만든 것을 한번도 사용해 본 적이 없습니다. 오랫동안 온라인으로 검색한 결과 너무 간단하거나 단순히 불가능할 수도 있었습니다. 혼자서 오랜 시간을 투자하여 마침내 일치에 성공했습니다.

과정은 다음과 같습니다

먼저 laravel5.4를 다운로드한 후, 공식 홈페이지에 직접 접속하여 원클릭 설치패키지나 컴포저 또는 스캐폴딩을 다운로드하면 이제 laravel 환경에 접근할 수 있습니다.

laravel에서 package.json 파일을 엽니다:

"private": true,
 "scripts": {
 "dev": "npm run development",
 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 "watch-poll": "npm run watch -- --watch-poll",
 "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
 "prod": "npm run production",
 "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
 },
 "devDependencies": {
 "axios": "^0.15.3",
 "bootstrap-sass": "^3.3.7",
 "cross-env": "^3.2.3",
 "jquery": "^3.1.1",
 "laravel-mix": "0.*",
 "lodash": "^4.17.4",
 "vue": "^2.1.10"
 }
}

빨간색 부분을 다음으로 수정합니다:

"devDependencies": {
 "axios": "^0.15.3",
 "bootstrap-sass": "^3.3.7",
 "jquery": "^3.1.1",
 "laravel-mix": "^0.8.3",
 "cross-env": "^3.2.3",
 "lodash": "^4.17.4",
 "vue": "^2.1.10",
 "element-ui": "^1.2.8",
 "vue-loader": "^11.3.4",
 "vue-router": "^2.4.0"
}

그 후 터미널에 프로젝트 루트 디렉터리를 입력하고

cnpm install

를 실행합니다. Taobao 미러가 없으면 다음을 수행할 수 있습니다. :

npm install //注意：(window下运行这个命令时要带上--no-bin-links)。

조금 위 package.json 파일에서 각 종속 라이브러리를 구성할 때 특정 버전에 맞게 수정해야 한다는 점에 유의해야 합니다. 그렇지 않으면 많은 함정에 빠지게 됩니다(이유는 묻지 마세요) 알아요!~)

이후에는 laravel 프로젝트 디렉터리 아래에 하나 더 있는 것을 확인할 수 있습니다.

이번에는 이미 사용 가능

이지만 여전히 laravel과 함께 제공되는 페이지입니다. npm run dev

지금까지 vue, vue-loader, vue-router, element-ui 구성을 마쳤으니 이제 vux를 설치할 차례입니다!

cd를 프로젝트의 루트 디렉터리로 이동하려면 vue-cli 스캐폴딩이 필요합니다. 아직 설치되지 않은 경우:

npm install vue-cli -g / cnpm install vue-cli -g

그런 다음 vux를 설치합니다.

npm install vux --save

음, 실제로는 꽤 빠릅니다~~

vux2에는 vux가 필요하기 때문입니다. -loader 사용하므로 vux-loader도 설치해야 합니다:

npm install vux-loader --save

적은 소스 코드를 올바르게 컴파일하려면 less-loader를 설치하십시오.

npm install less less-loader –-save

OK 설치가 성공적으로 완료되면 프로젝트 루트 디렉터리에 판매하고 webpack이라는 새 파일을 만듭니다. .config.js , 내부 구성:

그런 다음 루트 디렉터리에서 package.json을 열고 -config가 가리키는 파일을 수정하여 현재 webpack.config.js 파일을 가리킵니다.

저장 , 구성이 완료된 후 실행:

npm run watch

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

PHP를 사용하여 로그인을 시뮬레이션하고 데이터를 캡처하는 단계에 대한 자세한 설명

PHP를 사용하여 캐러셀 복권 알고리즘 사례 분석 구현

위 내용은 laravel 5.4+vue+vux+element 환경 매칭 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!