vue常用初始化流程

首先记录下插件与依赖的区别

• 依赖等同于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！！！（多少次都不长记性）