Vue中的一些安装（不全）

目录

查看vue版本

以下内容 均以 Vue2.0 版本为例！！！

Vue Router

Vuex

Vant

Element

Axios

postcss

json-serve

---

查看vue版本

vue --version

以下内容 均以 Vue2.0 版本为例！！！

Vue Router

Vue Router

yarn add vue-router@3.6.5

或者

npm install vue-router

Vue2：VueRouter 3.x        

Vue3：VueRouter 4.x

Vuex

Vuex

yarn add vuex@3

Vue2：Vuex 3.x        

Vue3：Vuex 4.x

Vant

vant-ui组件

yarn add vant@latest-v2

或者

npm i vant@latest-v2 -S

vant组件推荐自动按需导入：

1.        安装babel插件

yarn add babel-plugin-import -D

或者

npm i babel-plugin-import -D

2.        在  babel.config.js 文件中进行配置

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

Element

element-ui组件

yarn add element-ui -S

或者

npm i element-ui -S

element组件按需导入。

Axios

yarn add axios

postcss

基于 postcss 插件实现项目 vw 适配

1.

yarn add postcss-px-to-viewport@1.1.1 -D

2.根目录新建 postcss.config.js 文件，填入配置

module.exports = {

​	plugins:{

​		'postcss-px-to-viewport' : {

​			// 标准屏宽度

​			viewportWidth:375

​		}

​	}

}

json-serve

1. 安装全局工具json-serve（全局工具仅需要安装一次）

yarn global add json-server

或者

npm i json-server -g

npm install -g json-server

2. 在代码根目录下新建一个名为 db 的文件夹

3. 将资料 index.json 移入 db文件夹中

4. 进入 db 目录，打开终端命令cmd，执行命令 json-server index.json，启动后端接口服务

json-server index.json

5. 访问接口测试

注：

json-server --watch index.json