邯城往事

>>> 展颜笑夙愿,一笑泯恩仇 <<<

目录
搭建一个vue项目
/  

搭建一个vue项目

安装vue环境

  1. 先从nodejs.org中下载nodejs,安装完成后
    npm -v node -v
  2. 使用淘宝NPM 镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org
  3. 安装vue-cli脚手架
    cnpm install vue-cli -g
  4. 查看vue-cli是否成功,不能检查vue-cli,需要检查vue
    vue list
  5. 初始化项目
    vue init webpack "project"
  6. 运行vue项目
    cnpm install cnpm run dev

创建页面

新建一个template,命名为TopNav.vue

<template>
    <div class="TopNav">
        <div>
            <router-link to="/">首页</router-link>
            <router-link to="/music">音乐</router-link>
            <router-link to="/itemBank">题库</router-link>
            <router-link to="/news">图片</router-link>
            <router-link to="/about">个人中心</router-link>
            <router-link to="login">登录</router-link>
        </div>
        <!--    路由出口-->
        <!--    路由匹配到的组件将渲染显示在这里-->
        <router-view></router-view>
    </div>
</template>
 
<script>
export default {
    name: 'TopNav',
 
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .nav a {
        color: #42b983;
        margin: 0 10px;
    }
</style>

在index.js里面设置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import TopNav from '@/components/TopNav'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'TopNav',
      component: TopNav
    }
  ]
})

在app.vue引入

<template>
  <div id="app">
    <TopNav/>
  </div>
</template>
 
<script>
import './assets/css/my.css'
import TopNav from "./components/TopNav";
export default {
  name: 'App',
  components:{
    TopNav
  },
  methods: {
 
  }
}
</script>
 
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

npm run dev即可看到页面有变化啦


标题:搭建一个vue项目
作者:xuyuntong
地址:https://cjzshilong.cn/articles/2021/07/25/1627183359695.html

到头来 我们记住的 不是敌人的攻击 而是朋友的沉默 ---马丁·路德·金


                    
评论
取消