• 跟菜鸟教程快速搭建并简单使用Vue

    这篇博客只描述vue-cli (终端建立vue项目后的使用) ，使用vue项目框架前建议先去官网看视频学习基本的指令，也可以后面再学。
    建立项目后要先搞明白项目的目录都有什么用，可以看菜鸟教程的图片，主要是了解配置文件跟编写代码的位置

    目录

    一. 使用npm或cnpm

    没有使用过vue项目的系统：
    (1) 先安装node.js
    下面步骤记得以管理员身份打开的cmd

    (2) 选择使用淘宝镜像

    npm install -g cnpm --registry=https://registry.npmmirror.com

    • 1

    (3) 全局安装 vue-cli

    cnpm install --global vue-cli

    • 1

    (4) 创建一个基于 webpack 模板的新项目

    vue init webpack my-project

    • 1

    (5) 进入项目，初始化并运行：

    cd my-project
cnpm install
cnpm run dev

    • 1
    • 2
    • 3

    (6) 打包 Vue 项目

    npm run build

    • 1

    二. router+嵌套router+router重定向

    注意自己使用vue-router的版本，4.0以上的版本与4.0以下的版本存在区别。
    4.0以下的版本包的使用为：
    在这里插入图片描述
    4.0以上为：
    在这里插入图片描述
    本人开发使用4.0以下的本版，具体情况遇到再具体解决。

    创建项目的过程中如果没有选择自动下载router,那就手动下载：

    npm install vue-router --save-dev

    • 1

    npm不行就用cnpm,版本可以自行添加，我在package.json文件中找到
    “vue-router”: “^3.0.7”,
    修改版本为3.0.7，
    再运行

    npm install

    • 1

    1. router

    建一个文件夹router,夹一个index.js编写router配置

    import vue from 'vue'
import Router from 'vue-router' //1. 导入路由
import Content from "../components/Content";  //这个是一个vue内容页
vue.use(Router) //2. 安装路由

export default new Router({ //3.实例路由
  routes:[ //编写路由信息
    {
      //网页路径
      path:'/content',
      //名称
      name:'content',
      //跳转到
      component:Content
    }
  ]
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    把路由引入main.js,main.js是程序的一个入口
    引入的路由配置命名为小写开头

    import Vue from 'vue'
import App from './App'
import router from './router'//导入路由
Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: ''
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    App为第一个Vue文件，在这个文件实现页面信息的跳转跟展示
    跳转html前端使用

    vue使用

    展示使用** 

    <template>
  <div id="app">
    <p>主页</p>
    <router-link to="/content">内容</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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    内容页面

    <template>
<div>
  第二页
</div>
</template>

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

<style scoped>

</style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    2. 嵌套router

    建1–n个vue界面自定义内容

    在这里插入图片描述

    在router配置文件index.js中的主url下加入嵌套url

    在这里插入图片描述

    最后在主url页面中添加router跳转及显示

    为了做得好看一点可以去element-ui官网中抄：
    我抄了一个界面
    在这里插入图片描述
    然后就是找地方插入router-link 跟 router-view

    不要忘记安装element-ui仓库
    根据官网介绍使用

    3.router重定向

    在内容页（url是：/content）,发起重定向请求（url是：/gohome）跳回首页（url是：/home）

    在router配置文件中添加路由index.js
    在这里插入图片描述

    在这里插入图片描述

    三. 传递参数

    1. 添加参数

    在路由配置文件中添加

    {
          path:"/user_list/:date/:name/:address",
          name:'UserList',
          component:UserList,
          props:true
        },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    1. 编写router-link传参
    <router-link :to="{name:'UserList',params:{date:'2022-08-06',name:'用户列表',address:'朝阳'}}">用户列表</router-link>          

    • 1
    1. 取出参数展示
    <template>
<div>
  {{$route.params.date}}<!--第二步-->
  {{name}}
  {{address}}
</div>
</template>

<script>
export default {
  name: "UserList",
  props:['date','name','address']//第一步
}
</script>

<style scoped>

</style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    四. 路由钩子

    查看官网API

    <template>
<div>
  {{$route.params.date}}<!--第二步-->
  {{name}}
  {{address}}
</div>
</template>

<script>
export default {
  name: "UserList",
  props:['date','name','address'],//第一步
  beforeRouteEnter: (to, from, next) => {//举例的第一个钩子
    console.log("进入路由之前");
    next();
  },
  beforeRouteLeave: (to, from, next) => {//举例的第二个钩子
    console.log("关闭路由之后");
    next();
  }
}
</script>

<style scoped>

</style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    五. 使用Axios

    先安装axios
    项目中开发时一般先方测试版的数据文件
    要建立专用目录
    在这里插入图片描述
    文件存放于该目录下可以在网页直接访问json数据
    http://localhost:8080/static/mock/data.json

    Axios获取参数：

    <template>
  <div>
    {{ $route.params.date }}
    {{ name }}
    {{ address }}
  </div>
</template>

<script>
export default {
  name: "UserList",
  props: ['date', 'name', 'address'],//第一步
  beforeRouteEnter: (to, from, next) => {
    console.log("进入路由之前");
    next(vm => {   //执行一下函数
      vm.getData()
    })
  },
  methods: {
    getData: function () {
      this.axios({
        method: 'get',
        url: 'http://localhost:8080/static/mock/data.json'
      }).then(function (response) {
        console.log(response) //打印一下获取的数据
      })
    }
  }
}
</script>

<style scoped>

</style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
  • 相关阅读:
    载顺铂/环丙沙星壳聚糖温敏性水凝胶/温敏性壳聚糖-谷胱甘肽水凝胶/载EPO和Aspirin壳聚糖水凝胶的研究制备方法
    6-4布线问题（分支限界）
    TiDB部署及常用命令
    图像检索-MS Loss-论文复现
    Java程序员必备的工具和框架
    科技项目验收怎么做？不通过怎么办？
    百度百科怎么快速创建人物词条？教你几招技巧！
    DHCP原理与配置
    对SPA的理解、对 vue组件化的理解
    Android入门第17天-Android里的ProgressBar的使用
  • 原文地址：https://blog.csdn.net/liaojsgtcg/article/details/126157125