vue脚手架安装及依赖

一、安装Vue Cil (脚手架)

1. 需要先安装node.js,这是node官网地址： https://nodejs.org/en/download/ ，node有两种版本一种是稳定版一种开发版
   
   
   
   

2. 安装完成输入node -v查看版本也检查是否安装成功，npm-v查看版本确定安装完成，（安装node时会自动安装npm）

3. 接下来安装Vue Cil,

   1）yarn安装

   全局安装yarn最新版本：npm install -g yarn

   查看是否成功and版本：yarn -v

   注意事项：安装不成功，可能是npm版本问题，可以根据提示升级一下版本

   2）用yarn安装脚手架Vue-Cil

   网址：https://cli.vuejs.org/guide/installation.html

   代码：yarn global add @vue/cli

   查看vuecil版本：vue --version

   创建项目：vue create 项目名 比如：（ vue create hello-world ）
   
   
   
   运行项目，我这里用的 yarn serve，运行成功，出现页面，表示Cil项目创建成功
   
   
   
   

二、使用UI框架 Element | 官网地址：https://element.eleme.io/#/zh-CN/component/installation

• 全局引入

1.安装element 依赖 npm i element-ui -S，将依赖下载到node_modules中

2.安装完成后引入到入口文件main.js中，然后用组件就可以了

• 按需引入

1.安装依赖：npm install babel-plugin-component -D

2.优势：打包的时候，减小项目的体积，用到什么组件就使用那个。



运行项目报错：

三、Vue-router | 官方地址： https://router.vuejs.org/zh/guide/

说明：npm官网下载指定版本，跟上一个@，npm install vue-router@3.1.1



1.vue-router版本查看，网址：https://www.npmjs.com/ ,或者在百度搜索npm官网，点进去搜索vue-router，点进去第一个，右上角Versions，既是版本号

2.引入路由依赖，

1）创建路由组件

2）将路由与组件进行映射

3）在入口文件中挂载router

4）eslint 语法检测工具,在vue.config.js中关闭lint,命令：lintOnSave:false，关闭eslint校验

5）在App.vue中，路由匹配到的组件将渲染在这里，<router-view></router-view>

3.路由嵌套

1）创建主路由文件，Main.vue,这里面也需要一个<router-view></router-view>,在App.vue中的，是顶层 的，而在Main.vue中的，是将children中的组件渲染到这个嵌套的中。

四、引入less解析器

官网地址：https://less.bootcss.com/

1.引入依赖：npm install -g less，指定版本npm install -g less@4.1.2 + less-loader@6.0.0 / npm install -g less@4.1.2 less-loader@6.0.0

1）less-loader是less的解析器,oader其实也就是对应不同代码或是文件类型的加载器，其作用是对这部分进行识别和转化处理，例如把less转化为css，但是其本身并没有转化的功能，还是需要less才能进行转化

2）在<style lang="less" scope> 加入 lang="less" ,scoped 只在本页面使用

五、路由跳转

1.给页面绑定点击事件， @click="menuClick(item)

menuClick(item) {

console.log(item);

this.$router.push(item.path);

}

2.重定向：redirect: '/home'

1）含义：在router下的index.js配置路由时，有时候，配置不同的路由，但是，希望跳转到同一个页面，这个时候就需要使用redirect进行重定向，这样，就可以跳转到同一个页面。

3.this.$route是当前具体路由，this.$router是整个路由实例

1）this.$router 是用来操作路由的 this.$route 是用来获取路由信息的

2）this.$route: 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, meta, params, query 等属性。

3）this.$router： 表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法；

六、Vuex

官网地址：https://vuex.vuejs.org/zh/guide/

1.介绍

1）State：所有状态写在这里面

2）Getters：vuex里面的计算属性，跟vue计算属性有类似，根据State变化，重新进行计算

3）Mutations：修改State的方法，想要修改State唯一选择就是去Mutations里面修改，同步处理

4）Action：异步处理

5）Modules：模块化

2.安装依赖：指定版本：npm i vuex@3.6.2

七、axios

官网地址：http://axios-js.com/zh-cn/docs/

1.安装依赖：npm i axios

八、mockjs

官网：https://github.com/nuysoft/Mock

1.依赖：npm i mockjs

2.说明; mock是前端模拟后端接口的一个工具

九、echarts

官网：https://echarts.apache.org/zh/index.html

1.依赖：npm i echarts@5.1.2 @安装指定版本，5.1.2是版本号