[JavaScript知识库]使用vue脚手架创建项目并引用elementui

1.? ? ? ? vue create vue_demo

2.? ? ? ? npm run serve：启动然后打开URL进入默认vue界面，进行测试

上述两步的指令在cmd窗口，cd Desktop中执行上述命令

3.? ? ? ? 搭建vue环境后，有必要在package.json的同级目录下创建vue配置文件：

vue.config.js

main.js中添加在import段下：

// 关闭Vue的生产提示
Vue.config.productionTip = false

对于HelloWorld.vue可以删除，同时在App.vue中对于HelloWorld.vue的引入也可以移除

下方是创建vue后App.vue的默认

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

再下方是可删除的，删除了对于HelloWorld.vue的引入和CSS样式，记住，引入其他.vue文件必须如同引入HelloWorld.vue的方法一样

<template>
  <div id="app">
   
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
    
  }
}
</script>


<style>

</style>

进行以上后，vue的基本结构已完成并处于一个干净的状态（即没有任何多余的东西）

为了使用element-ui需要进行下列操作，下面可参考element-ui官网的安装和快速上手来在vue中配置element-ui

4.此时在vscode中打开文件夹vue_demo，vscode终端中安装element-ui服务：npm i element-ui -s

上述指令安装一次即可,下面参考element-ui官网的安装和快速上手来配置。

完整引入：见官网（简单但引入量大），对于这种引入只有一步把element-ui中的安装部分的完整引入的main.js中的内容完全复制粘贴到自己的main.js中即可，仅此一步！之后对于element-ui的配置已完成！

按需引入：见官网（复杂但引入量小），对于这种引入按照官网的操作不能直接全选覆盖自己的，要对自己的进行追加配置。在babel.config.js 中追加修改后的如下：此处，为纯净的（即初始化无任何多于东西），官网的一个地方与vue脚手架有版本适配问题，我的vue脚手架为4.x版，旧版或许依照官网修改babel.config.js可以

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

注：在新版本的vue脚手架中babel.babelrc已改名为babel.config.js?

按需引入的其他步骤按照官网慢慢来即可。

之后复制粘贴样式在App.vue或其他.vue文件中再把其他.vue文件引入到App.vue中即可

终端中：npm run serve：进行访问查看效果

如果彻底完成交给后端要进行：npm run build：打包整个项目