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

     

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

     

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

    在这里插入图片描述

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

    1. # -g 就是全局安装
    2. npm install cnpm -g
    3.  
    4. # 或使用如下语句解决npm速度慢的问题，但是每次install都需要
    5. npm install --registry=https://registry.npm.taobao.org
    • 安装vue-cli
    1. cnpm instal1 vue-cli-g
    2. #测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
    3. vue list

    在这里插入图片描述

    6.3 第一个vue-cli应用程序

     

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

    vue init webpack myvue

    全都选no

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

     

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

    输入：npm install

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

     

    在这里插入图片描述

    访问localhost:8080即可

     

     

     

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

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

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

    • 如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能
    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3.  
    4. Vue.use(VueRouter);

    测试路由：

     

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

    COntent.vue:

    1. <template>
    2.     <h1>内容页</h1>
    3. </template>
    4.  
    5. <script>
    6.     export default {
    7.         name: "Content.vue"
    8.     }
    9. </script>
    10.  
    11. <style scoped>
    12.  
    13. </style>

    Main.vue:

    1. <template>
    2.     <h1>首页</h1>
    3. </template>
    4.  
    5. <script>
    6.     export default {
    7.         name: "Main"
    8.     }
    9. </script>
    10.  
    11. <style scoped>
    12.  
    13. </style>

    Kuang.vue:

    1. <template>
    2.     <h1>Kuangshen</h1>
    3. </template>
    4.  
    5. <script>
    6.     export default {
    7.         name: "Kuang"
    8.     }
    9. </script>
    10.  
    11. <style scoped>
    12.  
    13. </style>
    • 安装路由，在src目录下，新建一个文件夹：router，专门存放路由，配置路由index.js

     

    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3. import Content from '../components/Content'
    4. import Kuang from '../components/Kuang'
    5.  
    6. import Main from '../components/Main'
    7. //安装路由
    8. Vue.use(VueRouter);
    9.  
    10. //配置导出路由
    11. export default new VueRouter({
    12.   routes:[
    13.     {
    14.       //路由路径
    15.       path:'/content',
    16.       name:'content',
    17.       //跳转的组件
    18.       component:Content
    19.     },
    20.     {
    21.       //路由路径
    22.       path:'/main',
    23.       name:'content',
    24.       //跳转的组件
    25.       component:Main
    26.     },
    27.     {
    28.       //路由路径
    29.       path:'/kuang',
    30.       name:'content',
    31.       //跳转的组件
    32.       component:Kuang
    33.     }
    34.   ]
    35. });
    • 在main.js中配置路由
    1. // The Vue build version to load with the `import` command
    2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3. import Vue from 'vue'
    4. import App from './App'
    5. import router from './router' //自动扫描里面的路由配置
    6.  
    7. Vue.config.productionTip = false
    8.  
    9.  
    10. /* eslint-disable no-new */
    11. new Vue({
    12.   el: '#app',
    13.   //配置路由
    14.   router,
    15.   components: { App },
    16.   template: '<App/>'
    17. })
    • 在App.vue中使用路由
    1. <template>
    2.   <div id="app">
    3.     <img src="./assets/logo.png">
    4.     <h1>Vue-Router</h1>
    5.     <router-link to="/main">首页</router-link>
    6.     <router-link to="/content">内容页</router-link>
    7.     <router-link to="/kuang">Kuang</router-link>
    8.     <router-view></router-view>
    9.   </div>
    10. </template>
    11.  
    12. <script>
    13.  
    14.  
    15. export default {
    16.   name: 'App',
    17.  
    18. }
    19. </script>
    20.  
    21. <style>
    22. #app {
    23.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
    24.   -webkit-font-smoothing: antialiased;
    25.   -moz-osx-font-smoothing: grayscale;
    26.   text-align: center;
    27.   color: #2c3e50;
    28.   margin-top: 60px;
    29. }
    30. </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：

     

     

  • 相关阅读:
    超声波模块详细介绍（stm32循迹小车中超声波的介绍）
    java学习之SpringCloud Alibaba
    NAT地址转换，路由器作为出口设备，实现负载分担
    python基于PHP+MySQL的图书共享交流论坛
    数据挖掘与机器学习：Python机器学习软件包Scikit-Learn的学习与运用
    微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
    4.03 用户中心-订单管理功能开发
    面试：dex文件结构
    EagleSDR USB HAT FT600
    c++ opencv将彩色图像按连通域区分
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/125487501