VUE项目依赖包安装及配置

这篇具有很好参考价值的文章主要介绍了VUE项目依赖包安装及配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.安装axios ,router,vue-router,vuex  (npm i xxx -S)

注意依赖包对应版本

VUE项目依赖包安装及配置

 2. elementui 按需引入配置

npm i element-ui -S

npm install babel-plugin-component -D

babel.config.js文件添加配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],// 这个不修改
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

VUE项目依赖包安装及配置

main.js

import {Button, Select} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Button)
Vue.use(Select)

不要把组件注册写成对象格式:Vue.use({Button,Select}),无法正常注册

VUE项目依赖包安装及配置

 3. router设置

在src下新建router目录,创建index.js,文件内容如下

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

export default new VueRouter({
    routes:[
        {
            name:'欢迎页',
            path:'/hello',
            component:()=>import('@/components/HelloWorld')
        }
    ]
})

在main.js注册路由

VUE项目依赖包安装及配置

 使用路由

VUE项目依赖包安装及配置

4.vuex设置

在src下新建store目录,创建index.js,文件内容如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store(  {
    namespaced:true,//开启命名空间,避免冲突
    // 提供唯一的公共资源,所以共享的数据统一放到store进行储存,类似data
    state:{
        testID:'123456'
    },
    getters:{},
    mutations:{},
    actions:{},
    modules:{}
})

在main.js入口文件中注册store

VUE项目依赖包安装及配置

 在组件里使用testID,出现报错"$store" is not defined on the instance but referenced during render...

VUE项目依赖包安装及配置

VUE项目依赖包安装及配置

 查看package.json发现vuex版本不匹配

VUE项目依赖包安装及配置

vuex现在默认vuex4版本,vuex4只能在vue3中使用,在vue2中能使用vuex3,当前项目使用vue2

删除node_modules目录下的vuex文件夹及package.json的vuex,重新安装vuex@3

 npm install vuex@3 -S

VUE项目依赖包安装及配置

5.axios配置

import Axios from "axios";

const instance = Axios.create({
  baseUrl: "/api",
});

instance.interceptors.request.use(
  (config) => {
    // console.log(config);
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

instance.interceptors.response.use(
  (res) => {
    return res.data;
  },
  (err) => {
    return Promise.reject(err);
  }
);

export default instance;

VUE项目依赖包安装及配置

 

6.项目上传到git仓库

VUE项目依赖包安装及配置

VUE项目依赖包安装及配置

VUE项目依赖包安装及配置

这样就是成功了 

VUE项目依赖包安装及配置文章来源地址https://www.toymoban.com/news/detail-428515.html

到了这里,关于VUE项目依赖包安装及配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包