vue高级部分

一、脚手架环境配置

  1.安装 node js 安装完成后 cmd 打开命令提示符窗口，输入： npm -v 检测是否安装成功，如果输出版本号，则表示安装成功。
  2.配置 npm
  npm（node package manager）：nodejs 的包管理器，用于 node 插件管理（包括安装、卸载、管理依赖等）因为 npm 安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常，所以我们乐于分享的淘宝团队干了这事。来自官网：这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10 分钟一次以保证尽量与官方服务同步。

npm config set registry https://registry.npm.taobao.org

  验证命令 npm config get registry 如果返回 https://registry.npm.taobao.org，说明镜像配置成功。有时一些项目中相关依赖下载报错也可以安装 cnpm。使用时只需要将原来的 npm 换成 cnpm 命令即可。 安装 cnpm 命令如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

  在一些大型前端项目中可能会报错说 python 没找到。只需要为 npm 或 cnpm 全局安装 windows-build-tools 即可。

npm install --global --production windows-build-tools

  3.在 NPM 中全局安装 Vue.js 构建大型应用。

npm install vue --global

  4.全局安装 vue-cli

npm install --global vue-cli

  5.创建一个基于 webpack 模板的新项目

vue init webpack my-project

输入命令后，会跳出几个选项让你回答：

Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），
Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字

Author ()： ----作者，输入你的大名 接下来会让用户选择：

Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了

Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，输入“y”回车或直接回车安装。

Use ESLint to lint your code? (Y/n) 是否使用 ESLint 管理代码，ESLint 是个代码风格管理工具，是用来统一代码风格的，选择不安装。

Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，选择不安装。

Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，选择不安装。

Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，选择不安装。

npm 安装依赖，选择使用自定义。

回答完毕后上图就开始构建项目了

  6.启动并允许

cd my-project
npm install
npm run dev
DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

  打开地址：http://localhost:8080/

  将项目拖入 idea 进行开发，idea 需要安装 vue.js 插件，由于 vue 脚手架项目会大量更新 node_modules 下的文件，导致软件卡顿。使用如下配置可以让 idea 忽略检查该目录。

  注意：Vue.js 不支持 IE8 及其以下 IE 版本。

  扩展：ESLint

  ESLint 是一个插件化并且可配置的 JavaScript语法规则和代码风格的检查工具。ESLint能够帮你轻松写出高质量的 JavaScript代码。如果安装 ESLint 后 package.json 中的 scripts 里面多了一条命令：

"lint": "eslint --ext .js,.vue src",

  同时 devDependencies 中多了如下依赖，在 devDependencies 中安装依赖命令为 npm install --save-dev 依赖包名。

"babel-eslint": "^8.2.1",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",

  项目中同时也会增加两个文件，一个存放忽略检查文件路径，一个是 eslint 的核心配置。

.eslintignore
.eslintrc.js

  最后在 build 下的 webpack.base.conf.js 中多了如下配置：

...
const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  ....,
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      ....
    ]
  },
....
}

二、目录结构与组件路由

  上一章节中我们使用了 npm 安装项目，我们在 IDED 中打开该目录，结构如下所示：

  目录解析

build	        项目构建(webpack)相关代码
config	        配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	        这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets:         放置一些图片，如logo等。
components:     目录里面放了一个组件文件，可以不用。
App.vue:        项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js:        项目的核心文件。
static          静态资源目录，如图片、字体等。
test            初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

  修改 HelloWorld.vue 中的 msg 的值，页面跟着相应的变化。

  在 components 下创建组件 About.vue 和 User.vue 内容如下：

<template>
  <div class="user">
    <h1>用户管理</h1>
  </div>
</template>
<script>
    export default {
        name: "User"
    }
</script>

<style scoped="">
</style>

  在router/index.js 中配置路由信息：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import User from "../components/User";
import About from "../components/About";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/user',
      name: 'user',
      component: User
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
  ]
})

  在 App.vue 中添加对应的 router-link 标签，router-view 就是我们路由视图的具体显示位置。

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/user">用户管理</router-link>
    <router-link to="/about">关于我们</router-link>
    <router-view>
  </router-view></div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

  项目打包命令：

cnpm run build

  build 进行中，一般这个过程需要一点点时间，打包完成，可以看到有提示 build complete 完成时候可以在相中发现多了一个 dist 文件夹，里面包括一个 css文件，js 文件和 index.html。生成的项目路径全部是以 / 开头，需放入 web 服务器的根目录才能访问，如果希望使用相对路径则修改：config/index.js里面的 build->assetsPublicPath 将原来的 / 改为 ./ 即可。

三、整合 bootstrap

  bootstrap 官网地址：https://www.bootcss.com/

  打开 bootstrap3 起步，在实例精选中找到 入门级模板 后得到其源代码，将其中的重要的 css 与 js 引入项目根目录的 index.html 中。

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>my-vue</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  
  
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  将导航代码拷贝如我们项目的 App.vue ，将所有的 a 标签换成 router-link ，并在所有组件中加入类型 container ，去掉导航的 navbar-fixed-top 类型。

<template>
  <div id="app">
    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">第一个vue项目</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><router-link to="/">首页</router-link></li>
            <li><router-link to="/user">用户管理</router-link></li>
            <li><router-link to="/about">关于我们</router-link></li>
          </ul>
        </div>
      </div>
    </nav>
    <router-view>
  </router-view></div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

  效果如下：

  路由时传参数

<router-link :to="'/user/'+12">用户管理</router-link>

  路由表中指定参数名

{
    path: '/user/:id',
    name: 'user',
    component: User
}

  组件页面配置接收参数

<template>
  <div class="user container">
    <h1>用户管理</h1>
    {{id}}
  </div>
</template>

<script>
  export default {
    name: "User",
    data() {
      return {
        id: ""
      }
    },
    created() {
      this.id = this.$route.params.id;
    }
  }
</script>

<style scoped="">
</style>

  发送请求：

npm install vue-resource --save

  导入和使用

import VueResource from 'vue-resource'
Vue.use(VueResource)

  发送请求：

this.$http.post('action')
    .then(function(res){
          alert(res.data);
    },function(){
          alert('false')
});

四、使用 vuex

  打开 vuex 官网地址：https://vuex.vuejs.org/

  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

  安装 vuex

npm install vuex --save

  显式地通过Vue.use() 来使用 Vuex

import Vuex from 'vuex'
Vue.use(Vuex)

  没有使用 vuex 前我们父子组件数据传递使用如下方式：

  父组件

<template>
  <div>
    <h1>用户管理{{id}}</h1>
    <t-dialog1 :show="show" @update="closeDialog"></t-dialog1>
    <button class="showDialog" @click="show=true">显示1</button>   
  </div>
</template>

<script>
  import dialog1 from '@/components/Dialog1.vue'

  export default {
    name: "User",
    components: {
      "t-dialog1": dialog1
    },
    data() {
      return {
        show: true
      }
    }, methods: {
      closeDialog: function (data) {
        this.show = data
      }
    }
  }
</script>

<style scoped="">

</style>

  子组件

<template>
  <div class="alert alert-success" v-show="show" @click="closDialog">弹窗内容</div>
</template>

<script>
  export default {
    name: "Dialog1",
    props:["show"],
    methods:{
      closDialog(){
        this.$emit("update",false)
      }
    }
  }
</script>

<style scoped="">
</style>

  之所以这么麻烦 , 是因为父组件可以通过 props 给子组件传递参数，但子组件内却不能直接修改父组件传过来的参数。

  这时候，使用 vuex 就可以比较方便的解决这种问题了：

  父组件

<template>
  <div>
    <h1>用户管理{{id}}</h1>
    <t-dialog2></t-dialog2>
    <button class="showDialog" @click="$store.state.show=true">显示2</button>
  </div>
</template>

<script>
  import dialog2 from '@/components/Dialog2.vue'
  export default {
    name: "User",
    components: {
      "t-dialog2": dialog2,
    },
    data() {
      return {        
      }
    }
  }
</script>

<style scoped="">
</style>

  子组件：

<template>
  <div class="alert alert-success" v-show="$store.state.show" @click="$store.state.show=false">弹窗内容</div>
</template>

<script>
  export default {
    name: "Dialog2",
    methods:{
    }
  }
</script>

<style scoped="">
</style>

  是不是方便了许多，这就是 vuex 最简单的应用，不要被网上其他教程吓到，vuex 原来可以这么简单 !

  只需要在 main.js 中加入

import Vuex from 'Vuex'
Vue.use(Vuex)
var store = new Vuex.Store({//store对象
  state:{
    show:false
  }
})

  再然后 , 在实例化 Vue对象时加入 store 对象 :

new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<app>',
  components: { App }
})</app>

  完成到这一步 , 上述例子中的 $store.state.show 就可以使用了。

五、整合 elementUI

  Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

  安装 element ui

npm install element-ui --save

  在main.js中声明element-ui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

  在helloworld.vue中加入

<el-button type="primary">element 按钮</el-button>

  安装软件时可能出现安装版本不兼容问题。安装时使用。

npm install --save <包名>@版本

  如果不知道该包有哪些版本，可以使用。

npm view <包名> versions --json