Vue2, Vue Router 및 Vuetify로 간단한 SPA 기본 프로젝트를 만드는 방법

11314 단어 vuevueroutervuetify
다음 단계는 2021년 6월 7일에 본인이 확인했습니다.

vue-cli 업데이트 1개




$ yarn global add @vue/cli

$ vue --version
@vue/cli 4.5.13



2 프로젝트 정리




vue create myproject


지금은 Vue 2를 선택하십시오.

Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features


프로젝트를 생성하기 위해 오랜 시간을 기다립니다(-:.

Vue CLI v4.5.13
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v4.5.13
✨  Creating project in /Volumes/devtmp/MyVuetify/myproject.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 198.70s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 269.16s.
⚓  Running completion hooks...
[-/4] ⠠ waiting...
📄  Generating README.md...

🎉  Successfully created project myproject.
👉  Get started with the following commands:

 $ cd myproject
 $ yarn serve


생성된 프로젝트 폴더로 이동합니다.

 $ cd myproject



3 라우터 추가




$ vue add router


히스토리 모드를 "예"로 선택하는 것이 좋지만 원하는 대로 해도 됩니다.

? Use history mode for router? (Requires proper server setup for index fallback in pro
duction) (Y/n)


몇 살을 기다립니다(-:

$ vue add router

📦  Installing @vue/cli-plugin-router...

yarn add v1.22.10
[1/4] 🔍  Resolving packages...



success Saved lockfile.
success Saved 0 new dependencies.
✨  Done in 339.87s.
✔  Successfully installed plugin: @vue/cli-plugin-router

? Use history mode for router? (Requires proper server setup for index fallback in pro
duction) Yes

🚀  Invoking generator for @vue/cli-plugin-router...
📦  Installing additional dependencies...

yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 105.88s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-router



4 Vuetify 추가




$ vue add vuetify


y를 선택하십시오(또는 git 저장소에 현재 상태를 먼저 등록하려면 N을 선택하십시오. 그러나 그다지 의미가 없다고 생각합니다.)

 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? (y/N)


기본값 선택

? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Preview (Vuetify 3 + Vite) 
  Prototype (rapid development) 
  V3 (alpha) 
  Configure (advanced)


몇 살을 기다리십시오.


5 App.vue에서 쓸데없는 장식 삭제



src/App.vue 파일을 열고 <v-app-bar>에서 </v-app-bar>까지 줄을 삭제합니다. 그런 다음 App.vue는 다음과 같아야 합니다.

<template>
  <v-app>

    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>

export default {
  name: 'App',

  data: () => ({
    //
  }),
};
</script>


그런 다음 src/views/Home.vue를 제거하고 다음과 같이 src/views/About에서 src/views/Home.vue로의 복사본으로 다시 만듭니다.

cp src/views/About.vue src/views/Home.vue


그런 다음 Home.vue를 열고 문자열 This is an about page를 This is an home page로 변경합니다. 그런 다음 Home.vue는 다음과 같아야 합니다.

<template>
  <div class="about">
    <h1>This is an home page</h1>
  </div>
</template>


마지막으로 src/components/HelloWorld.vue 파일을 제거합니다.


1.6 머티리얼 아이콘 링크 추가



다음과 같이 public/index.html에 재질 아이콘 링크를 추가합니다.

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<head>와 </head> 사이의 내부. 이후 index.html 파일은 다음과 같을 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>



7 서버 시작



다음으로 서버 시작

yarn serve


그런 다음 일반적으로 실행 중인 앱을 엽니다http://localhost:8080/.

 DONE  Compiled successfully in 20496ms                                                           16:14:57


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.11.9:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.


당신은 그런 따분한 페이지를보고 있어야합니다.



this error에 직면한 경우 다음과 같이 언급한 대로this answer sass-loader를 다운그레이드합니다.

yarn add [email protected]



역사


  • 2021년 6월 7일: 첫 번째 버전
    • Spyder의 IPython 콘솔에서 multipprocessing이 제대로 작동하지 않습니다.
    z-index IE에서의 미혹 (2)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage