vue脚手架安装及依赖

一、安装Vue Cil (脚手架)

  1. 需要先安装node.js,这是node官网地址: https://nodejs.org/en/download/ ,node有两种版本一种是稳定版一种开发版
    vue脚手架安装及依赖插图
    vue脚手架安装及依赖插图1
  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 )
    vue脚手架安装及依赖插图2
    运行项目,我这里用的 yarn serve,运行成功,出现页面,表示Cil项目创建成功
    vue脚手架安装及依赖插图3
    vue脚手架安装及依赖插图4

二、使用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脚手架安装及依赖插图5
运行项目报错:
vue脚手架安装及依赖插图6
vue脚手架安装及依赖插图7

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

说明:npm官网下载指定版本,跟上一个@npm install vue-router@3.1.1
vue脚手架安装及依赖插图8
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中,路由匹配到的组件将渲染在这里,

3.路由嵌套

1)创建主路由文件,Main.vue,这里面也需要一个,在App.vue中的,是顶层 的,而在Main.vue中的,是将children中的组件渲染到这个嵌套的中。
vue脚手架安装及依赖插图9

四、引入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)在

加入 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是版本号

文章来源于互联网:vue脚手架安装及依赖

THE END
分享
二维码