vue练手项目（day1：静态组件和路由组件）

0.环境准备

• 安装好node vue webpack 配置好淘宝镜像
• 项目启动后浏览器自动打开，这样就省去了每次启动项目后手动点击链接启动浏览器的麻烦，配置方法如下，在package.json中找到如下代码，并将     "serve": "vue-cli-service serve''改为"serve": "vue-cli-service serve --open",

  "scripts": {
           "serve": "vue-cli-service serve --open",
            "build": "vue-cli-service build",
            "lint": "vue-cli-service lint"
          },

• 关闭eslint校验工具，这个玩意会对代码进行严格的校验，比如你定义了一个变量但是你不使用就会给你报错，倒是项目跑不起来。关闭的方法是在根目录下创建一个vue.config.js文件，并暴露以下代码：

  module.exports = {
     lintOnSave:false,
  }

• 设置文件夹别名，项目大的时候，src里面的文件夹就会很多，每次找都很麻烦，要先用 ./ 跳出当前文件夹然后再进入别的文件夹，就比较麻烦，所以这里配置一个src的别名，每次通过调用这个别名就可以直接跳到src下，省去了跳出当前文件夹的麻烦，做法如下：创建一个jsconfig.json文件，并写以下代码，则每次输入@就等价于输入了src，同时exclude里面所包含的文件夹是不可以使用@符号代表src的

  {
      "compilerOptions": {
          "baseUrl": "./",
          "paths": {
              "@/*": [
                  "src/*"
              ]
          }
      },
      "exclude": [
          "node_modules",
          "dist"
      ]
  }

1.非路由组件

• 非路由组件一般放在components文件夹下面，这部分组件可以理解为是所有页面共用的。
• 现在都是使用单文件组件，所以使用非路由组件大概可以分为如下几个步骤：
  • 创建组件：即xxx.vue文件，并将静态页面中的结构和样式填入其中
  • 引入组件：在App.vue组件里面引入各个组件
  • 注册组件：在App.vue通过components属性注册组件
  • 使用组件：在App的结构中相应的地方使用组件即可

2.路由组件和路由器

• 路由组件一般放在pages|views文件夹下面，这部分组件不交给App.vue管理而实交给路由器统一调度。
• 那么如果要使用路由器，就要引入vue-router插件。这个插件暴露出来的是一个构造函数，这个构造函数可以用来生成路由器实例对象，并通过vue配置对象的router属性配置到vue实例中，所以说vue其实需要的是一个路由器实例对象。那么这样一来就可以在外部配置，然后再引入了。
• 路由器实例对象的创建步骤：
  • 引入路由器构造函数VueRouter ：import VueRouter from ’vue-router‘
  • 创建实例对象并暴露：

    // 配置路由的地方
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    // 配置路由
    // VueRouter是一个构造函数
    // vue配置路由需要的是一个路由实例
    
    import Home from '../pages/Home'
    import Login from '../pages/Login'
    import Register from '../pages/Register'
    import Search from '../pages/Search'
    export default new VueRouter({
        routes:[
            {
                path:'/home',
                component:Home
            },
            {
                path:'/login',
                component:Login
            },
            {
                path:'/register',
                component:Register
            },
            {
                path:'/search',
                component:Search
            }
        ]
    })

• 路由的基本使用步骤：
  • 安装vue-router
  • 引入：import VueRouter from ’vue-router‘
  • 使用：Vue.use（VueRouter ）
  • 注册路由：router
  • 使用路由

    import Vue from 'vue'
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    import router from './router/index'
    new Vue({
      render: h => h(App),
      // 注册路由
      router
    }).$mount('#app')