Vue学习笔记-从0到1搭建实战项目

Posted 2022-10-21 wyx100

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习笔记-从0到1搭建实战项目相关的知识，希望对你有一定的参考价值。

新建项目

vue create hello1

注：项目名称不能有大写字母（Warning: name can no longer contain capital letters）

新建项目

vue create hello1

http://localhost:8080/

vscode导入文件

用vscode导入文件

新增页面

1.新增文件views/introduce.vue

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

2.App.vue新增代码

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/introduce">Introduce</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style lang="scss">
#app 
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;


#nav 
  padding: 30px;

  a 
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active 
      color: #42b983;
    
  

</style>

3.修改router/index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  
    path: '/',
    name: 'Home',
    component: Home
  ,
  
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  ,
  
    path: '/introduce',
    name: 'Introduce',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "introduce" */ '../views/Introduce.vue')
  
]

const router = new VueRouter(
  mode: 'history',
  base: process.env.BASE_URL,
  routes
)

export default router