首先记录下插件与依赖的区别
- 依赖等同于npm install XXX,它仅仅是把所需的东西放到你的node_modules文件夹中
- 插件将调用插件自身的js脚本,可以将依赖添加到package.json中,并在项目的适当位置插入导入语句
所以我们需要安装的是插件。
npm install
第一步首先是要进行npm install,不然后续会出很多问题.
安装
axios
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kyhjYuC6-1611072877070)(vueBegin/image-20201219014726082.png)]
element-ui
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FaQAzCqI-1611072877073)(vueBegin/image-20201219014853297.png)]
配置
//package.json
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"axios": "^0.18.0",
"vue-cli-plugin-axios": "0.0.4",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.11"
},
可以看到,在package.json中,自动载入了两个依赖。
与此同时,main.js中导入了依赖,
//main.js
import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import './plugins/element.js'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
文件目录增加了插件,
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S2kOwzkQ-1611072877074)(vueBegin/image-20201219015359414.png)]
增加配置文件
在根目录新建文件vue.config.js
,在其中添加如下配置信息
module.exports = {
devServer: {
'proxy': {
'/api': {
target: 'http://localhost:5000', //调试时后端接口映射
changeOrigin: true
}
}
},
publicPath: './', //build时生成相对路径而不是绝对路径
//以下两句为flask所需,分别复制到根目录即可
outputDir: "templates", //html文件
assetsDir: "static", //css,js等文件
}
最后千万不要忘记,配置完vue.config.js后重启dev!!!(多少次都不长记性)