wordpress内链插件/宝鸡seo外包公司

1、vue-cli 安装

win+R 输入cmd 进入命令行
命令行清屏 ds
进入e盘 e:

1、安装 node , node -v 查看安装版本

2、安装 淘宝镜像 ，cnpm -v 查看安装版本

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

3、安装 webpack , webpack -v 查看安装版本

全局安装 webpack:

npm install --global webpack

不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack版本的项目中，可能会导致构建失败。

cnpm install webpack -g// 安装vue-cli脚手架 ,vue-cli -V 查看安装版本
npm install vue-cli -g// 创建项目
vue init webpack myProject（项目工程名）    //会有一些初始化设置// 安装项目依赖
cd myProject
npm install   //下载package.json中的软件包，需进入package.json的文件中中// 安装 vue路由模块 vue-router  和网络请求模块 vue-resource
cnpm install vue-router  vue-resource --save    //--save   将安装的模块保存到package.json的文件中中// 启动项目  运行开发者模式（dev)
npm run dev

2、vue-cli中配置Sass

// 安装依赖的node模块
npm  install node-sass --save-dev
npm install node-loader --save-dev
// -g 的意思是将模块安装到全局;   -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖;
// -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖// 在webpack.base.config.js的rules:中加上
{test:/\.scss$/,loaderL["style","css","sass"]
}// 在用sass的地方
<style lang="scss" type="text/css"></style>

3、路由 vue-router

参考：https://www.cnblogs.com/SamWeb/p/6610733.html

• 路由-指向的意思，一种映射（即页面上home按钮对应home内容，about按钮指向about内容），
  所以页面上有两个部分：按钮部分 和 对应显示的部分；

在js中配置路由 设置（按钮和内容的）对应关系；

路由中有3个概念：route 、routes 、 router

• route - 一条路由，例如：home按钮->home内容，是一个路由route；
• routes - 一组路由，把页面里的每条路由组合起来，形成一个数组。例如：[{home按钮=>home内容},{about按钮=>about内容}]
• router - 一种机制，类似一个管理者，来管理路由；routes 只是定义了一组路由，是静止的，当点击的时候，通过router 去查找对应的内容并显示

客户端中的路由，实际是dom元素的显示和隐藏；客户端的路由有2中实现方式：基于hash 或 基于 H5 history api

1、页面实现（html文件中）

<router-link to='/home'>Home</router-link>    //对应点击按钮部分,属性to 表示点击后，指向的路径
<router-view></router-view>          //对应显示部分

2、js中配置路由

// 路由组routes 由 路由route组成的数组，一条路由route是一个对象,由两部分组成：路径path 和 组件component ；
// 例如{path:'/home',component:home}export default{// 在router-> index.js首先定义路由组routes：const routes = [{path:'/home',component:Home},{path:'/about',component:About}]// 在router-> index.js 中创建router 对路由routes进行管理,router 由构造函数 new vueRouter()创建，接收routes参数；const router = new vueRouter({routes,   //routes:routes, 的缩写})// 配置完成后，在main.js中把router 实例 注入到vue根实例中，就可以使用路由了const app = new Vue({el:'#app',router,})
}// 执行过程：用户点击<router-link to='/pathurl'></router-link>的时候，根据to属性 指向的路径  在路由组中查找对应的组件component，
// 然后把组件渲染到<router-view></router-view>所在的地方，   这些都是基于hash实现的；// 确保：安装了vue-router   cnpm install vue-router --save// 定义组件home.vue  和 about.vue// 在app.vue中定义router-link 和 router-view// 在src下创建新文件router.js 定义router，就是定义 路径 到 组件 的映射// 在router.js文件中：引入vue 和vue-router// import Vue from "vue";// import VueRouter from "vue-router";// 引入组件// import home form './home.vue'// import about from './about.vue'// 告诉vue 使用VueRouter// Vue.use(vueRouter)// 定义路由组// comst routes=[//   {path:'/home',component:home},//   {path:'/about',component:about}// ]// 实例化一个路由router// const router = new vueRouter({//   routes,// })// export default router// 把路由router注入到根实例中，在main.js中引入路由// import Vue from 'vue'// import App from './app.vue'//// import router from 'router.js'//// new Vue({//   el:'#app',//   router,//   render:h=>h(app)// })

3、重定向

// 3、第一次进入页面时，路径是'/',需要给这个路径相应的配置，给这个路径'/'指向一个组件，例如组件home,
// 但是如果我们写[{path:'/',component:home},{path:'/home',component:home}]会报错，两条路径不能指向同一个组件，// 所以我们需要《重定向》，重定向就是重新指定一个方向，例如：页面本来访问'/'，我们重新指向路径'/home',相应的就会显示home组件
// vueRouter 用redirect 来定义重定向路径
exort default{const routes = [{path:'/',redirect:'/home'},    //重定向路径 redirect,首页时显示home路径 对应的组件{path:'/home',component:home},{path:'/about',component:about}]
}

4、路由的实现

// 打开浏览器的控制台，可以看到 router-link 渲染成了a标签，to属性 渲染成了a标签的href属性
// router-view渲染成了我们定义的组件，它其实是一个占位符，他在哪，匹配路径的组件就显示在什么地方// router-link处于选中状态时，vueRouter会自动给渲染的a标签添加一个样式类名 .router-link-active,所以尅呀修改这个类的样式来修改选中样式
// .router-link-active{color:red;}无效，需要在类名前加上a  才可以 ；未选中的router-link 要改变其样式，可以直接给他一个类名；a.router-link-active{color:red;}

5、动态路由

// 假如需要在路径中一个动态的部分，比如路径'/user' 有不同的id，在vue-router中动态的部分 以:开头，
// 比如{path:'/user/:id',component:user}  如下，在app.vue文件中
<template><router-link to='/home'>home</router-link><router-link to='/about'>about</router-link><router-link to='/user/123'>用户123</router-link><router-link to='/user/456'>用户456</router-link><router-view></router-view>
</template>// 在router.json的文件中
export default{const router = new vueRouter({routes:[{path:'/',redirect:'/home'},     //redirect重定向路径{path:'/home',component:home},{path:'/about',coomponent:about},{path:'/user/:id',component:user}    //动态路由，路径中的动态部分以:开始  ，配置了动态id]})
}// 定义user.vue组件
// 当vue-router注入到根实例中后，在组件的内部可以通过 this.$route 来获取router实例，
// this.$route有一个params属性，可以获取动态路由中的动态部分，
// params是一个对象，属性名是路径中定义的  动态部分，如path:'/user/:id' 中的动态部分id；
// 属性值是router-link中to属性中的动态部分,如 to='/user/123'中的动态部分 123；// 使用computed属性 获得动态路由中的动态部分，如：
<template><div>你好 {{ userName}}, 欢迎登录</div>
</template><script>
export default{name:'user',data(){return{}},computed:{    //计算属性，userName(){return this.$route.params.id       //获取动态路由中的动态属性id的值}}
}
</script>// 由于动态路由在来回切换时，都是指向同一个组件，但vue不会销毁再创建这个组件，而是一直《复用》这个组件，因为在一个生命周期里
// 所以切换动态路由的时候无效，// 所以我们只好在app.vue中 利用watch 来监听$route的变化，所以用监听来实现
<template><div>你好 {{ userName}}, 欢迎登录</div>
</template><script>export default{name:'user',data(){return{userName:''}},watch:{$route(to,from){  //to 表示你要去的那个组件，from表示你从哪个组件过来的，他们也是两个对象，也有params属性this.userName = to.params.id;}}}
</script>

6、嵌套路由

// vue 提供childrens 属性，用于配置子路由。他也是一组路由，相当于routes
// 子路由在html部分不变，定义router-link标签用于导航，定义router-view用于渲染对应的组件<router-link to='/home/apple'>apple</router-link>   //to属性注意，路由进入的时候现进入home页 在进入子路由apple
<router-link to='/home/banana'>banana</router-link><router-view></router-view>// router.js 中配置修改如下：
export default{new VueRouter({    //实例化一个routerroutes:[{path:'/',redirect:'/home'},{path:'/home',component:home,childrens:[{path:'',component:apple}, //当进入home页时，子路由默认显示的组件{path:'/apple',compontent:apple},{path:'/banana',component:banana}]},{path:'/about',component:about},{path:'/user/:id',component:user}]})
}

7、命名路由

// 就是给路由一个名字，加了一个name属性，例如
{path:'/user/:id',name:'user',component:user
}
// 有了命名路由，router-link中的to属性就可以使用对象了,当使用对象的时候，to前面加: 表示绑定
<router-link to='/user/123'>用户123</router-link>
<router-link :to='{name:'user',params:{id:123}}'>用户123</router-link>

8、编程式导航

// 编程式导航，主要用在按钮点击上，当点击的时候 跳转到另一个组件，调用this.$router.push()的方法
// 当把router注入到根实例中后，通过，this.$router获得router
// 在方法中跳转界面并传参，在router文件下的index.js中定义路由
{path:'/detail',name:'detail',     //命名路由，给路由起的名字，有了name 才可以给router-link的to属性使用对象component:detail
}// query传参
this.$router.push({path:'/detail',query:{id:123,type:'ab'}
})
this.$route.query.id   //接收参数
// 地址显示   http://expert.test.sipopsp.com/#/user/usercenter/appointDetail?orderId=27ca6deb-d244-4611-8fdd-b48948caf3b6&state=1&type=4// params传参
this.$router.push({name:'detail',params:{id:123,type:'ab'}
})
this.$route.params.id   //接收参数
// 地址显示   http://expert.test.sipopsp.com/#/user/usercenter/appointDetail// vue路由传参params 与 query 两种方式的区别
// 参考：https://www.cnblogs.com/lulianlian/p/7682790.html
// 用法上的区别：query要用path来引入，params要用name 来引用，接收参数的时候类似，
// 分别是this.$route.query.id   和  this.$route.params.id
// 展示上的区别：query类似于ajax中的get传参，会在浏览器地址栏中显示参数，而params类似post ，不会再地址栏中显示参数；

4、组件之间的通信

// 参考 https://segmentfault.com/a/1190000010530600
// 根据组件之间的关系：父->子 、 子->父 、非父子有所不同