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的文件中，在这个文件中提供基础三个自定义标签：
        template
        script
        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实例

// 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 } 
})

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的属性，这个属性就保存了路由组件的映射关系

　

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
    } ] });

(2) “main.js”

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

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

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

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

• <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>

  注意：

  (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”文件已帮我们定义好。

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

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

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

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

本文转载自：https://blog.csdn.net/qianxing111/article/details/78526000