Ape Creation Essay | [Vue 5분] 프로젝트를 만드는 Vue Cli 스캐폴딩

두 번째 단계에 따라 파일을 생성할 때 오류를 보고한 경우: VSCode에서 오류를 보고했습니다. vue : 이 시스템에서 스크립팅이 금지되어 있기 때문에 E:\nodejs\node_global\vue.ps1 파일을 추가할 수 없습니다. 그런 다음 내 솔루션에 따라 단계별로 명령을 실행하여 해결할 수 있습니다. 여기 모든 사람이 볼 수있는 오류 데모입니다. 잘못된 파트너가 없으면 루트 번호가 루트 번호입니다. 오류가 있으면 당신은 내 방법을 따를 수 있습니다. 편집 완료:

수정이 완료되면 다음 구성 항목을 볼 수 있습니다.

여기에 있는 구성 옵션은 이전에 생성한 프로젝트에서 저장한 구성입니다. 위 및 아래 키를 사용하여 기존 구성을 선택할 수 있습니다. 일반적으로 수동 자동 구성을 사용합니다. 프로젝트의 필요에 따라 구성할 수 있습니다. 여기에서 블로거를 사용합니다. "수동으로 기능 선택" 수동 사용자 지정 구성. 그런 다음 이것을 선택하면 다음 화면을 볼 수 있습니다.

우리는 각 기능에 대한 자세한 소개를 제공할 것입니다, 당신은 또한 Baidu를 번역할 수 있습니다, 많은 방법이 있습니다:

여기서는 세 가지 기능 옵션만 사용하고 Enter를 선택한 후 다음 프롬프트 인터페이스로 들어갑니다.

클릭 후 다음 인터페이스로 들어갑니다.

라우팅 모드 선택

여기에서 "기록" 모드에 있습니다. Enter 키를 누르거나 대문자 Y를 입력하고 다음 인터페이스로 들어갑니다.

CSS 프리컴파일러 선택

우리는 다양한 수정을 할 수 있습니다.당신은 당신이 사용할 CSS의 사전 컴파일을 선택할 수 있습니다.우리는 여기에서 Less를 선택하고 선택하고 Enter 키를 눌러 다음 인터페이스로 이동합니다.

구성 저장 방법 선택

우리가 선택한 것은 위의 그림과 같이 package.json 형식의 파일에 이러한 선택한 구성을 저장하는 것입니다. "In package.json"을 클릭하면 다음 인터페이스로 들어갈 수 있습니다.

위 그림은 현재 구성을 나중에 사용하기 위해 저장할지 여부를 의미합니다. 현재 구성을 선택하면 이 구성은 나중에 생성된 동일한 구성의 프로젝트에서 사용할 수 있으며 물론 저장할 수도 없습니다. 저장을 원하시면 "Y"를 입력하시고 저장을 원하시면 파일명을 입력하시면 됩니다. 다음과 같이:

그런 다음 여기에서 다운로드를 기다립니다.

프로젝트에 필요한 패키지 파일 자동 다운로드

vue 플러그인이 성공적으로 다운로드 및 설치될 때까지 기다린 후 다음 인터페이스를 볼 수 있으며 "cd qit" 프롬프트는 루트 디렉터리에 들어갈 수 있음을 의미하고 "npm run serve" 명령을 실행할 수 있습니다. 우리의 계획.

2. vue 프로젝트 시작

1. 프로젝트 디렉토리

위의 작업에 따라 구성 파일을 이미 다운로드했으며 vue는 이 파일을 폴더에 다운로드했으며 살펴볼 수 있습니다.

2. 프로젝트 시작

터미널을 통해 "npm run serve" 명령을 실행하고 소프트웨어 변경이 완료될 때까지 기다리면 실행 중인 웹사이트의 URL이 표시될 수 있습니다. 아래 그림과 같이:

3. 브라우저가 프로젝트 홈 페이지 인터페이스를 엽니다.

"Ctrl+click"을 통해 웹사이트를 클릭합니다. http://localhost:8080/, 즉, vue의 기본 인스턴스 프로젝트 인터페이스를 다음과 같이 표시할 수 있습니다.

이 시점에서 기본 인스턴스 프로젝트가 시작되고 완료됩니다.

3. 프로젝트 구성 디렉토리 및 파일

"vue create qbt" 명령줄을 실행한 후 E 디스크는 디렉터리에 대한 새 디렉터리 "qbt"를 만들었습니다. 이 프로젝트 아래에는 많은 구성 디렉터리와 파일이 있습니다. 다음 그림과 같이 이러한 파일의 의미와 기능을 설명할 수 있습니다.

아래 설명을 쓰시면 다들 읽기 귀찮고 저도 쓰기 귀찮아서 그냥 스크린샷에 바로 쓸 수 있어서 다들 읽기 편하고 저도 이해가 되네요 .

1. 공개 디렉토리

공개 디렉토리 아래에 두 개의 파일이 더 있습니다.

하나는 프로젝트의 아이콘 파일인 favicon.ico 파일입니다.

다른 하나는 프로젝트의 엔트리 파일을 생성할 수 있는 템플릿 파일인 index.html로 webpack에서 패키징한 js와 css도 이 파일에 포함될 것이다. 브라우저가 프로젝트에 액세스하면 생성된 index.hrtml 파일이 기본적으로 열리며 이 파일의 내용은 다음과 같을 수 있습니다.

2. src 디렉토리

또한 src 디렉토리 아래에 있는 디렉토리에 대한 간단한 설명을 제공하거나 단순히 스크린샷에 표시하면 다음과 같이 장면을 명확하게 볼 수 있습니다.

자산: CSS, 이미지 등과 같이 디렉토리에서 사용해야 하는 리소스 파일을 저장합니다.
구성 요소: vue 개발에 일부 공개 구성 요소 저장
라우터: 라우팅 구성 파일 저장
보기: 개발 프로세스에서 login.vue(로그인 인터페이스)와 같은 페이지 수준 구성 요소와 이전에 본 인스턴스의 두 구성 요소, 즉 about.vue 및 home.vue를 저장합니다.

main과 js로 생성할 때도 설정을 해야 하는데 설정이 완료된 후의 효과는 다음과 같아야 합니다.

import { createApp } from 'vue'  //引入你生成的文件
import App from './App.vue'   //引入生成的顶级组件
import router from './router'   //引入路由
import Vue from 'vue'     //引入vue

createApp(App).use(router).mount('#app')  
new Vue({    //创vue实例
    router,   //传入路由
    render:h=>h(App)  //传入顶级组件
}).$mount('#app')  //挂载DOM

3. 라우터 디렉토리

라우터 디렉토리를 클릭하면 index.js 파일을 볼 수 있습니다. 이것은 라우팅 구성을 위한 파일입니다. 코드를 구성하려면 클릭하십시오. 구성된 예제 코드는 다음과 같습니다(코멘트는 이미 코드에 있음).

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' //引入组件
import VueRouter from 'vue-router'   //引入路由
Vue.use(VueRouter)  //注册路由
import Vue from 'vue'   //引入vue文件

//进行我们路由的配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

//创建路由实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),//模式
  routes
})

export default router  //导出路由

4. 프로젝트 예시 효과 표시

여기에서 개방 환경 구축을 완료하고 사전 작업을 완전히 완료한 후 소규모 개발 실험의 부러움을 시작합니다. 탐색 모음에서 기능을 클릭하여 해당 기능의 콘텐츠 인터페이스에 연결하는 것과 같은 인스턴스를 실험할 수 있습니다.

먼저 이 인터페이스를 실험해보고자 합니다. 먼저 전체 보기 폴더와 구성 요소 폴더의 .vue 파일을 포함하여 vue의 기본 인스턴스 코드에서 모든 구성 요소를 삭제한 다음 아래 단계에 따라 완료해야 합니다. 새로운 프로젝트 개발.

1. 새로운 단일 파일 생성

삭제된 보기 폴더에 해당 기능을 가진 3개의 새로운 .vue 컴포넌트를 생성합니다. 이 세 컴포넌트는 실험에 사용됩니다. 이 세 가지 이름은 에디터가 디자인을 완료했을 때의 모듈 이름이므로 기념으로 사용하십시오! 그런 다음 이 세 가지 새 파일 구성 요소에 대한 코드를 각각 작성합니다. 코드는 다음과 같습니다.

세 모듈의 템플릿 코드는 분할 화면을 통해 볼 수 있습니다.

2. 라우팅 구성

위와 동일하게 router 디렉토리의 index.js 파일에 프로젝트의 라우팅을 설정합니다.먼저 원본 인스턴스의 기본 라우팅 설정을 삭제하고 우리 고유의 코드를 작성합니다.코드는 다음과 같습니다. :

//import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/Home.vue' //引入组件
import VueRouter from 'vue-router'   //引入路由
Vue.use(VueRouter)  //注册路由
import Vue from 'vue'   //引入vue文件

//进行我们路由的配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/News',
    name: 'News',
    component: () => import('../views/News.vue')
    //这个方式根据自己的需要进行加载的
  },
  {
    path: '/Remote',
    name: 'Remote',
    component: () => import('../views/Remote.vue')
    //这个方式根据自己的需要进行加载的
  }
]

//创建路由实例
const router = new VueRouter({
  mode: 'history',
  base:process.env.BASE_URL,
  routes
})

export default router//导出路由

3. App.vue에서 라우팅 탐색 구성

라우팅을 구성한 후 App.vue 구성 요소에서 탐색 및 라우팅 항목도 구성해야 합니다. 그렇지 않으면 성공적으로 이동할 수 없습니다! 수정된 코드는 다음과 같습니다.

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">首页</router-link>|
      <router-link to="/News">信息</router-link>|
      <router-link to="/Remote">远程</router-link>

    </div>
    <router-view/>
  </div>
</template>

<style lang="less">

#nav {
  padding: 30px;

a {
  font-size: 20px;
}
}
h1 {
  font-size: 40px;
}
</style>

마치다!