序章 熟悉战场篇—了解vue的基本操作

了解vue 的基本目录：

• dist 是打包后存放的目录(后续可以改)
• node_modules 是依赖包
• public 是静态index页面
• src 是存放文件的目录
• assets 是存放静态资源的目录
• components 是存放组件的目录
• views 是存放页面文件的目录（没有views 自己新建一个）
• App 是页面首加载文件(可以处理一些逻辑)
• main.js 入口文件，全局的配置js
• vue.config.js 是一个可选的配置文件，可对vue-cli(webpack)自定义配置。

其他的自行理解

首先我们可能需要修改vue 的默认配置项

比如我们需要关闭eslint，就是语法报错提示,这个在运行的时候会报错就很烦，可以使用vue ui 或者在配置里直接修改

使用vue ui关闭：

在命令行中运行： vue ui 会自动打开一个配置项页面

如下图：

Plugins是可以安装哪些插件包

Dependencies是开发环境的依赖包

Configuration 是配置项

我们点击 Configuration ：

选择这个选项，把开关关闭，再点击保存即可

注意：使用vue ui关闭没效果的话直接在vue.config.js里关闭

在vue.config.js里关闭：

module.exports = {
  // 关闭eslint语法验证
  lintOnSave: false,
  devServer: {
    // 关闭eslint语法验证
    overlay: {
      warning: false,
      errors: false,
    },
  },
};

保存后再重新运行项目就行了

现在试着自己写一个页面当作首页：

在views下面建一个Home目录，在Home目录下再建一个Home.vue文件

注意：这里的Home文件命名要进行驼峰命名法，规范开发最为重要，要养成这个习惯

Home.vue

在app.vue下引入Home页面

保存后会自动刷新页面，效果图：

下一篇 路由篇 前往战场—使用路由访问页面

后续会持续更新......