毕业设计——基于Web的城市充电桩指示系统（二）

本文链接：https://blog.csdn.net/qq_46590172/article/details/129750621

创建vue2项目

既然打算写vue2项目，那肯定先要创建一个呀对不对，我用的方法是可视化的vue ui，在文件夹里打开小黑框，输入vue ui，便会打开一个可视化界面
点击项目目录
点击左上角的绿色按钮，再点击Vue项目管理器，进入项目目录
进入项目管理器
点击中间的创建，选择一个目录
选择目录
这里需要注意，当切换到根目录时，会报错，这是因为没有用管理员权限打开小黑框
然后点下面的在此创建新项目，进入到创建界面
创建项目
输入一个项目名，不能用中文
包管理器这里我选择npm
然后点击下一步，进入选择配置界面，选择一个预设或者手动配置
这里我选择手动配置
选择预设
点击下一步后，进入配置界面，我选择关掉Linter，打开Router、Vuex和CSS Pre-processors
功能配置
然后再点击下一步，进行最后的配置
版本、预处理器配置
vue版本我选择2.0，不启用history模式，预处理器选择scss
然后点击创建项目，等创建完成就好啦。
创建项目中
创建好了就把小黑框停止，关掉就行了，启动项目我们会用另一种方法。

配置项目

用VS code打开创建好的项目，在终端运行npm i，安装依赖

然后运行npm run dev命令，理论上来说可以直接运行项目

但是我这里出现错误

检查packge.json文件，发现'scripts'下面确实没有'dev'，于是搜索了一番

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "new": "plop"
  },

将上面的代码覆盖掉scripts，然后项目就可以正常npm run dev了
然后把项目中用不到的东西都删掉，app.vue页面用下面的代码覆盖

<template>
  <div id="app">
      <router-view />
  </div>
</template>

<style lang="scss">
  #app {
      width: 100vw;
      height: 100vh;
      padding: 0;
      margin: 0;
  }
  body {
      margin: 0;
      height: 100vh;
  }
</style>

这个时候试着格式化一下代码，神奇的事情发生了，代码格式化的格式和自己配置的不一样了
代码格式化混乱
这个时候，需要在根目录新建一个.editorconfig文件，将下面的代码放进去

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
end_of_line = crlf

这个时候再格式化一下，问题是不是解决了
格式化正常