vue-cli搭建与vue-router(路由配置)

1.Vue-cli:
Vue-cli 是专门搭建 vue 开发环境的脚手架;

2.安装 Vue-cli:
(1)安装:npm  install  vue-cli  -g

(2)检测是否安装,查看版本:vue  -V

3.创建项目:
(1)vue create 自己的项目名称(完成之后会生成含有自己项目名称的文件夹,也就是自己的项目);

  第一次创建项目 不需要太多依赖 只选择babel —>package.json

(2)跳转的自己的项目文件夹中:cd  项目名称;

(3)安装所有的插件:npm  install;

(4)写完自己的项目之后,进行打包:npm  run  build(会生成一个 dist 文件夹(需要上线的文件夹),会将自己写的所有 js 文件合并在一个 build.js 中);

(5)最后运行服务:npm  run  dev;

4.路由

  直接在vue的项目中根目录中安装   命令:vue add router(安装过程中会提示,是否在路由中使用历史模式,路由分为历史模式和hash模式)

  安装完成后 配置路由:main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import HelloWorld from './components/HelloWorld.vue'
 
Vue.config.productionTip = false
 
//全局注册组件
// Vue.component("users", User);
Vue.use(VueRouter)
 
//配置路由
const router = new VueRouter({
  routes: [
  //当路径为/时 跳转到Home组件中 { path:
"/", component: Home }, ],
//路由模式为历史模式 mode:
"history" }) /* eslint-disable no-new */ new Vue({ router, el: '#app', components: { App }, template: '<App/>' })

  在main.js中通过路由设置了两个访问路径:

  大概意思就是,当访问路径“/”时,跳转到组件Home页面,当访问路径“/helloworld”时,跳转到组件HelloWorld页面。

  注意:import(导入)路由和使用到的组件。

  在main.js中通过new Vue实例化了一个Vue对象,其中

  router:使用配置的路由;

  el(element):需要获取的元素,一定是html中的根容器元素,这样就把main.js文件和index.html文件联系起来了;

  component/template:使用 components 属性注册需要用到的组件App.Vue

App.vue代码如下:

<template>
  <div id="app">
    <!-- <a href="/">Home</a>
    <a href="/HelloWorld">Hello</a>-->
    <!-- 使用a标签做导航栏每次点击都重新加载整个页面-->
    <router-link to="/">
      <span>Home</span>
    </router-link>
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {};
  },
  components: {}
};
</script>
 
<style>
span {
  background: rgb(211, 196, 196);
  font-size: 30px;
}
span:active {
  background: green;
  color: white;
}
</style>

每个.vue文件中包含三部分内容:

(1)template模板:html结构

(2)script行为:处理逻辑

(3)style样式:解决样式

<router-link> </router-link> 相当于a标签,通过to属性指定目标地址

<router-view></router-view>路由匹配到的组件将渲染在这里。

css作用域:仅在当前页面作用

Home.vue 代码如下:

<template>
  <div id="home">
    <!-- <h1>{{title}}</h1> -->
    <header-app></header-app>
    <users></users>
    <footer-app></footer-app>
  </div>
</template>
 
<script>
//局部注册组件
import Users from "./Users";
import Header from "./Header";
import Footer from "./Footer";
 
export default {
  name: "home",
  data() {
    return {};
  },
  components: {
    users: Users,
    "header-app": Header,
    "footer-app": Footer
  }
};
</script>
 
<style>
</style>

 

posted @ 2020-03-12 19:11  你可以这样称呼我  阅读(...)  评论(...编辑  收藏