vue-cli项目中的插件和依赖
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli项目中的插件和依赖相关的知识,希望对你有一定的参考价值。
参考技术A使用方式(以axios为例):
使用的方式
1.安装:插件通过命令行安装为vue add @scope/vue-cli-plugin-<name>或速记vue add @scope/<name>
2.配置插件:一般的插件都会提供一些可供用户选择的配置,这要看插件怎么设计。具体的使用方式也是根据不同的插件有不同的功能,这里就不举例子了
不依赖vue-cli脚手架创建vue项目
参考技术A 我们一般创建vue项目都是通过vue-cli脚手架去创建,这次我尝试了通过文档完成所有项目配置包括webpack、ant-design-vue、vue-router、vuex等项目源码: https://github.com/wzp123321/myVueJSProByMySelf.git
1.新建项目
2.使用vscode打开项目
3.初始化
4.安装基本的 npm 包
5.创建文件夹以及文件
6.配置webpack.config.js
在这之前先安装一些依赖
模板解析依赖:
样式依赖:
css-loader: https://webpack.docschina.org/loaders/css-loader/
文件加载依赖
解析es6语法依赖: https://github.com/babel/babel-loader
这是一个webpack插件,可简化HTML文件的创建以服务您的webpack捆绑软件
现在就可以配置webpack.config.js,如果有什么不清楚的可以参考官网 https://webpack.docschina.org/configuration/
7.安装解析依赖 https://github.com/webpack/webpack-dev-server
8.修改package.json文件
9.配置babel,创建.babelrc文件
修改webpack.config.js
如果编译时报错的话可能是因为你没有安装依赖:
10.主要文件:
app.vue:
index.js:
html文件:
Vue项目文件夹大致参考
1.混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
mixins文件夹下可以写各种调用ajax请求方法的方法,然后在需要调用这些方法请求数据的文件中:
这里的getCourseList文件中有请求需要的参数以及请求完成之后获取的数据 直接在文件类似this.getAllDemoClass();就能调用方法
2.components通用组件存放文件夹:
在这个文件夹下封装了项目需要的组件 然后在components下的index.js中向外暴露即可 然后在使用组件的文件中引用components即可
后续:
1.引入ant-design-vue:
具体引入操作可见官网 https://vue.ant.design/docs/vue/introduce-cn/
2.引入Vue Router https://router.vuejs.org/zh/installation.html
路由配置文件:router/index.js
3.引入vuex
新建store/index.js
news/index.vue
4.页面顶部进度条插件Nprogress
使用:
以上是关于vue-cli项目中的插件和依赖的主要内容,如果未能解决你的问题,请参考以下文章