配置Vue环境是接下来开发的一个基础，接下来将展示如何在电脑上配置Vue2环境

一 确保已经配置了Node.js

输入

node -v
npm -v

即可检查是否已经配置（用管理员身份运行，后期还会要用）

如果没有，看上一篇文章如何配置

如何在电脑上配置Node.js – gf的设计

二 配置Vue环境

确保第一步完成了以后，接着就可以随便建立一个文件夹，然后复制路径，打开刚才的CMD，输入

cd /d "你复制的路径"

确保已经切换到此路径，后面还会要用

接下来配置Vue环境，用指令

npm i @vue/cli -g

接着等待即可

出现这个以后即可继续

三 创建Vue文件

输入

vue create vue-demo

其中vue-demo为你要创建的名字，可以随便选

接下来选择vue2

等待即可

出现这个即下载成功，接下来打开这个文件夹，会出现一个vue-demo的文件夹

接下来，将这个文件夹拖入vscode

四 打开Vue

点击终端 新建终端

输入

npm run serve

即可运行此vue文件

五 配置components文件夹

建立Main Header Footer文件，初始化一下即可

接着打开App.vue

先用import语句导入刚刚建立的三个文件，并在components中引入，完整代码如下

<template>
  <div id="app">
    <Header></Header>
    <Main></Main>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from './components/Header.vue';
import Main from './components/Main.vue';
import Footer from './components/Footer.vue';

export default {
  name: 'App',
  components: {
    Header,
    Main,
    Footer
  }
}
</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>

但是此时会报错

这个的话是文件名审查，由于比较严格，我们可以把这个审查关掉

六 关闭文件名审查

打开 vue.comfig.js

输入linOnSave:false,即可

接下来重新运行npm run serve，此时就没报错了

七 总结

这篇文章讲述了如何配置Vue环境，和遇到文本审查的报错如何解决