Vue:第一个Vue程序和vue-router路由

喵俺第一专栏

已于 2022-07-30 23:07:59 修改

阅读量237

点赞数

分类专栏： # Vue总结文章标签： vue.js 前端 javascript

于 2022-06-27 17:29:31 首次发布

本文链接：https://blog.csdn.net/dengfengling999/article/details/125487501

版权

Vue总结专栏收录该内容

43 篇文章 3 订阅

订阅专栏

先下载Node.js,上面网址进行安装

在cmd中运行node -v命令，查看是否能够输出版本号
在cmd中运行npm -v命令，查看是否能够输出版本号

* 安装node.js淘宝镜像加速器（cnpm）

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题，但是每次install都需要
npm install --registry=https://registry.npm.taobao.org

安装vue-cli

cnpm instal1 vue-cli-g
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

在这里插入图片描述

6.3 第一个vue-cli应用程序

创建第一个Vue程序，需要先找好一个目录，进入那个目录下使用Windows命令：

vue init webpack myvue

全都选no

之后项目创建成功，再进行配置项目环境

然后，进入创建好的项目，输入cd myvue：

输入：npm install

当出现问题时，它会给出提示我们按照提示来就行
在这里插入图片描述

npm run dev 运行项目，会看到首先进行打包

成功之后

在这里插入图片描述

访问localhost:8080即可

Ctrl+C,关闭项目：

webpack.base.conf.js:打包

可以设置端口号：

刚才npm下的所有运行的文件：

index.html:程序的主入口

前端也有src目录，它是vue组件+js，纯js开发

html都变成这个样子了：它里面是插槽，他要把组件拼进去

package.json:打包需要的版本

进入项目，输入上述命令：npm install vue-router --save-dev

如果运行错误，更换cnpm install vue-router --save-dev

在启动Vue项目如果启动不了，运行错误，更换以下运行版本 npm i vue-router@3.1.3

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

测试路由：

定义几个自己的组件 Content.vue 、Main.vue、Kuang.vue

COntent.vue:

<template>
    <h1>内容页</h1>
</template>

<script>
    export default {
        name: "Content.vue"
    }
</script>

<style scoped>

</style>

Main.vue:

<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

Kuang.vue:

<template>
    <h1>Kuangshen</h1>
</template>

<script>
    export default {
        name: "Kuang"
    }
</script>

<style scoped>

</style>

安装路由，在src目录下，新建一个文件夹：router，专门存放路由，配置路由index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '../components/Content'
import Kuang from '../components/Kuang'

import Main from '../components/Main'
//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径
      path:'/content',
      name:'content',
      //跳转的组件
      component:Content
    },
    {
      //路由路径
      path:'/main',
      name:'content',
      //跳转的组件
      component:Main
    },
    {
      //路由路径
      path:'/kuang',
      name:'content',
      //跳转的组件
      component:Kuang
    }
  ]
});

在main.js中配置路由：程序入口：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置

Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

在App.vue中使用路由

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>Vue-Router</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-link to="/kuang">Kuang</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',

}
</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>

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

运行npm run dev,然后浏览器访问localhost:8080

点击首页：

点击内容页：

点击kaung：

喵俺第一专栏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue:第一个Vue程序和vue-router路由

先下载Node.js,上面网址进行安装 * 安装node.js淘宝镜像加速器（cnpm）安装vue-cli 创建第一个Vue程序，需要先找好一个目录，进入那个目录下使用Windows命令：vue init webpack myvue全都选no之后项目创建成功，再进行配置项目环境然后，进入创建好的项目，输入cd myvue：输入：npm install当出现问题时，它会给出提示我们按照提示来就行进入项目，输入上述命令：npm install vue-router --s
复制链接

扫一扫