vue-cli及vue-router(一)

1.单文件组件

• (1)问题：
  使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: ‘#container ‘}) 在每个页面内指定一个容器元素。当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，这种做法的缺点很多：

  • 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
  • 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
  • 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
  • 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel。
• (2)单文件组件
  文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
• (3)解析打包.vue文件
  vue为了能够使我们在项目开发中对组件进行更好的维护，提供了一个单文件组件系统，vue把每一个独立的组件放在一个.vue的文件中，在这个文件中提供基础三个自定义标签：
  
  1. template
  2. script
  3. style
     来放置组件不同的内容块，但是因为浏览器不能够直接去识别该文件类型，所以我们需要通过webpack来进行编译打包，官方提供了一个对 .vue 文件进行处理的loader：vue-loader。

• (4)注意:如果出现了如下的提示：
  ERROR in ./src/Hello.vue
  Module build failed: Error: Cannot find module ‘vue-template-compiler’
  还需下载“vue-template-compiler”第三方模块并引入。

  <code>    <template>        <h1>{{message}}</h1>    </template>    <script>        export default {            name: 'hello',            data() {                return {                    message: 'Hello Miaov'                }            }        }    </script>    <style></style></code>

2.vue-cli

vue实际开发使用 .vue 的但组件系统来实现，但是不能适应实际复杂的需求，我们还需要配置很多的一些东西来和 .vue 进行融合，这个配置很繁琐，所以官方提供了一个工具，帮助我们来构建一个项目开发过程中必须使用的一些内容，这个工具：vue-cli，通过这个工具我们就可以很方便的来创建一个基于vue的项目，我们也把这个工具称为 脚手架。
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

安装

前提：先安装npm或yarn。
npm install vue-cli -g或yarn global add vue-cli命令。

vue-cli的构建

当我们通过上述方式安装好vue的脚手架以后，我们就可以在命令行中使用一个命令：vue（该命令是没有-cli的）

• 1.vue-cli创建步骤：

  • (1)vue init

    • init：初始化（创建）基于vue的项目
    • ：构建模板的名称：常用的是 webpack，其他的可以参考：https://github.com/vuejs-templates
    • ：要构建的项目的名称
      如：vue init webpack hello：基于webpack来构建一个名称为hello的vue项目（项目构建一定要联网！联网！联网！）

  • vue-cli是一个交互式命令行，通过vue命令构建项目会需要我们填写一些项目的信息：

    • (2)Project Name：要创建的项目名称（该命令会生产一个package.json文件，文件中的name选项就是这个ProjectName，默认为当前创建的项目目录名称，也可以自行制定（但是需要符合package.json中name命名规则，不要出现大写字母，空格，下划线，可以使用 - ）
    • (3)Project Description：项目简介，也会出现在package.json文件中,可选
    • (4)Author：作者，可选
    • (5)下一步直接回车
    • (6)nstall vue-router：是否安装vue路由组件，做项目的话一定要安装;
    • (7)Use ESLint to lint your code：是否需要使用ESLint模块进行代码检测。语法检测工具，一般正规的项目团队中需要安装，个人项目看自己的使用情况决定
    • (8)Setup unit tests with Karma + Mocha?：是否安装测试（单元测试）
    • (9)Setup e2e tests with Nightwatch?：是否安装端到端的测试
      完成上面步骤，over！
  • 下载依赖包：”npm install”
    通过vue-cli完成配置以后，下一步需要安装vue所需要的依赖包，在该创建好的项目目录中，运行”npm install”命令。
    项目需要安装的依赖包在vue-cli工具自动生成的package.json文件中有说明：
    
    • dependencies：项目中实际需要使用到的依赖包
    • devDependencies：项目开发过程中需要使用的一些工具包，不是项目实际线上代码的一部分。
• 2.运行
  所需要的安装依赖包安装完成以后，就可以启动项目，运行
  
  • yarn run dev / npm run dev：开启一个测试开发环境。会开启一个本地服务器，我们就可以通过该服务器环境去访问当前这个项目。
  • yarn run build/npm run build：
    构建项目，把项目进行编译、打包，生成的文件默认存放在dist目录下。我们可以把项目打包后的文件上传到服务器，就是我们在线上运行需要的代码。
  • 界面：如果是首次运行，那么会看到一个欢迎页面，下面我们就可以进行项目开发。
    

• 3.生成的项目的目录结构
  

  • (1) build目录：构建项目命令所需要使用到的工具相关的脚本文件和配置文件
  • (2) config目录：在vue-cli中会自动安装一个小型的express搭建的热重载web服务器，config里面就是关于这个服务器的相关配置
  • (3) dist目录：项目编译构建上线后的存放目录
  • (4) node_modules目录：项目依赖包存放目录

  • (5) src 目录：项目源代码存放目录
    main.js：vue脚手架为我们自动生成的项目中设置的入口文件，在该入口文件中，做了一些项目初始化的工作

    • 引入 Vue
    • 引入必要的组件

    • 创建Vue实例

      <code>    // The Vue build version to load with the `import` command    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.    // 导入 Vue 框架    import Vue from 'vue'    // 导入 App 组件对象    import App from './App';    import router from './router/index';    // 设置项目开发提示    Vue.config.productionTip = false;    // 创建Vue实例对象    new Vue({        el: '#app',        // router: router,        router,        template: '<App/>',        components: { App }    })</code>

  • (6) static目录：配置静态资源（内置的web服务器对应）存放目录
    在项目开发过程中，我们的大部分任务是在src这个目录下完成的。

2.路由

需求

当我们的应用变得复杂了以后，涉及到的页面也会变多，逻辑也会变复杂，原来我们是通过多页面的方式来组织和维护我们的网站，但是这样的用户体验不是太好（因为会刷新或跳转页面），为了解决用户体验问题，最好的方式，数据（页面会发生变化），但是不需要跳转、刷新。

• 通过ajax异步无刷新获取数据
• 获取到数据以后通过vue来处理和管理还有渲染页面。

什么情况下获取数据渲染页面？

传统的处理方式：通过url重新发送请求得到新的数据和页面，获取什么页面数据由url来决定，使用了单页面开发模式的话，就不能再使用页面跳转，但是可以使用url中的hash值的变化来决定获取什么内容渲染什么页面。
所以一个url的hash对应一个视图，那么我们就需要设置hash和视图的关系，我们可以把hash和view做一个对应关系（映射）
- 设置hash-view的map（映射）关系
- 监听hash变化
- 当hash值变化的时候，根据map找到对应的组件来渲染视图。
vue为我们提供了一个第三方的框架来实现上述的功能:vue-router
上面我们提到的 地址-视图 的映射：路由

vue-router

• 1.安装：
  npm install vue-router / yarn add vue-router.
  若在构建vue-cli的时候，在询问“nstall vue-router”（是否安装vue-router）时，选择“Y”,这里就不用重复安装vue-router。

• 2.配置路由步骤：

  • (1) 配置： “router/index.js”

    • 导入 vue-router
    • 把vue-router作为插件调用：Vue.use();
      

      Vue.use( plugin )
      参数：{Object | Function}
      用法：
      安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。

    
    也就是说，“plugin”必须提供一个install方法以供vue自动调用。
    
    • new Router()得到一个路由对象，并把该对象添加到Vue实例的router属性中

    • new Router()需要传入一个配置对象，该对象中包含一个routes的属性，这个属性就保存了路由组件的映射关系

      <code>    import Vue from 'vue';    import VueRouter from 'vue-router';    import Register from '@/components/Register';    import Login from '@/components/Login';    // 注册vue-router组件到Vue实例中，才能在组件中使用 <router-view /> 组件</br>    Vue.use(VueRouter);    // 创建一个vuerouter实例对象，用来处理路由和组件的映射，该构造函数接受一个对象，其中routes    export default new VueRouter({        routes: [            {                //路由路径                path: '/register',                //路由名称(非必须)                name:"reg",                //路由组件                component: Register            },            {                path: '/login',                name:"login",                component: Login            }        ]    });</code>

  • (2) “main.js”

    • import router from ‘./router/index’;

    • 在vue实例中添加“router: router”属性。

      <code>    import Vue from 'vue';    import App from './App';    import router from './router/index';    new Vue({        el: '#app',        //router: router,        router,        template: '<App/>',        components: { App }    })</code>

  • (3) “App.vue”
    渲染和当前url中匹配的路由组件：“”。
    vue-router会把和当前匹配路由组件拿取出来，替换这里的router-view。

    <code>    <template>        <div id="app">            <List :data="searchUsers" />            // router-view：用来放置和当前url地址匹配的组件内容            <router-view></router-view>        </div>    </template>    <script></script>    <!--scoped:设置该属性，那么style中的样式只对当前组件中的元素产生影响-->    <style scoped>        ul li {            color: red;        }    </style></code>

• 注意：
  

  • (a).vue2.5版本支持大写的HTML标签，如上文代码“”;
    　vue2.0还是烤串写法；
  • (b).“App.vue”文件导入时，可以不写扩展名，是因为在“bulid/webpack.base.conf.js”文件中，已帮我们解析好;

  • (c).在 “router/index.js”中，“import Login from ‘@/components/Login’;”，
    “@”指的是src目录，也是在在“bulid/webpack.base.conf.js”文件已帮我们定义好。

  <code>    resolve: {        extensions: ['.js', '.vue', '.json'],        alias: {          'vue$': 'vue/dist/vue.esm.js',          '@': resolve('src'),        }      },</code>

• (d).在上述代码中，”<style scoped></style>“,
  

  单文件组件让你可以在同一个文件里完全控制 CSS，将其作为组件代码的一部分。
  这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件
  内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

这里的数字是随机生成的。