前端架构

环境搭建
https://www.cnblogs.com/songxuelong/p/15823251.html

cmd到指定文件夹   创建项目
vue create -r https://registry.npm.taobao.org [项目名称]

修改package.json文件，查缺补漏

 "dependencies": {

    "core-js": "^3.8.3",

    "vue": "^2.6.14",

    "vue-router": "^3.1.3",

    "element-ui": "^2.12.0"

  },

  "devDependencies": {

    "@babel/core": "^7.12.16",

    "@babel/eslint-parser": "^7.12.16",

    "@vue/cli-plugin-babel": "^5.0.0",

    "@vue/cli-plugin-eslint": "^5.0.0",

    "@vue/cli-service": "^5.0.0",

    "eslint": "^7.32.0",

    "eslint-plugin-vue": "^8.0.3",

    "node-sass": "^4.14.1",

    "sass-loader": "^8.0.0",

    "vue-template-compiler": "^2.6.14"

  },


修改babel.config.js

module.exports = {

  presets: [

      '@vue/app'

    ],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

修改main.js文件

加上去

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

cd到项目目录下载

npm install element-ui@2.12.0 --save

 npm install babel-plugin-component --save-dev


加载   npm install