vue 프로젝트를 초기화한다는 것은 명령줄에서 명령을 실행한다는 것이 무엇을 의미합니까?

명령줄에서 "vue init webpack vue-project" 명령을 실행하는 것은 vue 프로젝트를 초기화하는 것을 의미합니다. 이 명령은 "vue-project"가 사용자 정의를 의미하는 webpack을 기반으로 하는 "vue-project" 프로젝트를 초기화하는 것을 의미합니다. 프로젝트 이름, 프로젝트 이름은 대문자를 사용할 수 없습니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue3 버전, DELL G3 컴퓨터.

VUE 프로젝트 초기화 단계 명령

1, Node.js 설치;

Window 설치 패키지 Mac 설치 패키지
설치 성공 여부 확인 node -v
버전 표시 및 성공 , 그림과 같이

2, vue-cli 스캐폴딩을 설치합니다.

명령줄 창 cmd를 엽니다(window+R, cmd 입력 및 Enter)

cnpm 명령 실행 install vue-cli -g code><code>cnpm install vue-cli -g

安装成功如图

3，初始化项目文件夹；

在你准备建项目的文件夹打开cmd 执行命令 vue init webpack vue-project

그림과 같이 성공적으로 설치되었습니다

3, 프로젝트 폴더를 초기화합니다.

프로젝트를 빌드하려는 폴더에서 cmd를 열고 vue init 명령을 실행합니다. webpack vue-project(참고: vue-project는 프로젝트 이름을 사용자 정의합니다. 프로젝트 이름은 대문자를 사용할 수 없습니다.)

그림과 같이:

초기화가 완료되면 그림과 같이 그림:

프로젝트의 성공적인 시작은 그림과 같습니다:

성공적인 시작 후 페이지 효과는 다음과 같습니다. 그림:

기타 세부 사항 추가됨:

1. 제가 사용하는 명령줄 도구는 Git입니다. 최신 설치 패키지 링크는

Window 설치 패키지

2입니다. 주소 표시줄에 http: //localhost:8081/#/ # 기호를 제거하는 방법 끝

편집기에서 프로젝트를 열고 디렉터리의 src 아래 router 아래에 있는 index.js를 찾아 열고 모드를 그림과 같이 mode:'history'로 변경합니다:

3 , 프로젝트를 시작한 후 주소를 복사하여 붙여 넣을 필요가 없습니다. 즉, npm run dev를 실행하면 페이지가 브라우저에서 자동으로 열립니다.

편집기는 프로젝트를 열고 config에서 index.js를 찾은 다음 autoOpenBrowser를 찾습니다. : 거짓, 18번째 줄 정도. false를 true로 변경하면 됩니다. 그림에 표시된 대로:

새 브랜치를 생성하고 라우팅을 구성할 때 경로에 주의하세요.

4. 스타일

• less_loader는 less에 따라 다르므로 둘 다 설치해야 합니다. , 프로젝트 종속성(vue ui) 또는 터미널 설치에 설치할 수 있습니다.

  다음 오류가 발생하면 스타일 종속성이 설치되지 않았음을 의미합니다.

• 터미널 설치 스타일 종속성:

• 
  정규인 경우 npm install stylus-loader css-loader style-loader --save-dev를 실행하여 종속성을 설치합니다.

적은 경우 실행합니다. npm install less less-loader --save-dev 종속성을 설치하기만 하면 됩니다.

sass인 경우 npm install sass sass-loader --save-dev를 실행하여 종속성을 설치하세요. 또는 ($npm intall sass-loader --save; $npm install node-sass --save)

less-loader vue 프로젝트의 최신 버전을 설치하면 프로젝트에서 오류가 발생합니다. 1개의 오류로 컴파일하지 못했습니다.

ERROR  Failed to compile with 1 errors                                 14:20:44
 error  in ./src/components/HelloWorld.vue
Module build failed: TypeError: loaderContext.getResolve is not a function
    at createWebpackLessPlugin (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:31:33)
    at getLessOptions (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:148:31)
    at Object.lessLoader (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\index.js:27:49)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-378 14:3-18:5 15:22-386
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js1234567891011121314

그럼 버전 문제입니다. 해결책은 레스로더 버전을 낮추는 것입니다.

최신 버전을 먼저 제거하세요

yarn remove less-loader
npm uninstall less-loader123

레스로더 5.0.0 버전을 설치하세요

yarn add less-loader@5.0.0
npm install less-loader@5.0.0 -D123

5.npm ERR:

at npm install을 실행하면 오류가 발생합니다.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: operatingsystem@0.1.0
npm ERR! Found: vue@3.1.5
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0" from the root project
npm ERR!12345678

콘솔에 npm -V를 입력하면 내 npm 버전이 7.x입니다. npm7.x 버전이 npm6.x보다 일부 명령에서 더 엄격하기 때문입니다. 설명할 수 없이 이 오류가 발생했습니다

두 가지 해결 방법이 있습니다. 🎜🎜1) 명령 뒤에 --legacy-peer-deps를 추가합니다. 🎜🎜2) npm6.x를 사용합니다. 🎜🎜 팁: npm을 사용할 때 npm@7을 제거할 필요가 없습니다. @6. npx를 사용하여 npm 버전을 지정할 수 있습니다. 예: npx -p npm@6 npm i --legacy-peer-deps🎜🎜이 방법이 즉시 작동하지 않으면 node_modules 및 package-lock.json을 먼저 삭제할 수 있습니다🎜

관련 추천: vue.js 비디오 튜토리얼

위 내용은 vue 프로젝트를 초기화한다는 것은 명령줄에서 명령을 실행한다는 것이 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!