ESlint相关设置

• 创建一个名为 .prettierrc 文件

• 在该文件下写入以下代码：

  {
    "semi": false, // 去掉分号
  "singleQuote": true // 将双引号改成单引号
  }

  关闭Eslint语法校验

  module.exports = {
  lintOnSave: false
  }

  安装构建工具及依赖

  Vue-cli

  npm install -g @vue/cli

  Vite

  npm install vite-create-app -g

  Webpack

  npm install webpack webpack-cli -g

  Vue-router

  npm install vue-router@3.5.2 -S

  Vuex

  npm install vuex --save

  Scss&Sass

  npm install sass sass-loader

  Element-ui

  npm install element-ui -S

  Axios

  npm install axios

  Vue2.x

  项目创建

  vue create <project-name>

  配置 vue-router

• 在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下代码 ```javascript // 1. 导入 Vue 和 Vue-Router 的包 import Vue from ‘vue’ import VueRouter from ‘vue-router’

// 2. 调用 Vue.use() 函数，把 VueRouter 安装为 Vue 插件 Vue.use(VueRouter)

// 3. 创建路由的实例对象 const router = new VueRouter()

// 4. 向外共享路由的实例对象 export default router

// 5. 导入路由模块 在 main.js 中 // 默认情况下不输入文件地址会自动查找该目录下名称为 index.js 的文件 import router from ‘@/router’

// vue 项目中要用路由，就必须把路有实例对象通过下面的方式挂载 new Vue({ // 属性名和属性值相同，可以简写 router })

<a name="vemrE"></a>
## 配置 Vuex
- 在 src 目录下创建 store 文件夹，并在该文件夹下创建 index.js 文件
```javascript
// 导入 vuex 包
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 导出 vuex 对象
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
  plugins: []
})
// 挂载 vuex 到 vue 实例
import store from './store'
new Vue({
  store
})

配置 element-ui

// main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

配置 axios

// main.js
import axios from 'axios'
Vue.prototype.$axios = axios

Vue3.x

项目创建

vue create <project-name>

npm init @vitejs/app <project-name>

配置 vue-router

# npm 安装
npm install vue-router@4
# 在 src 目录下新建 router 和 views 目录
# 在 router 目录下新建 index.js 文件，并进行配置
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('@/views/props.vue')  // .vue不能省略
    }
  ]
})
export default router
# 在 main.js 中调用
import { createApp } 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router).mount('#app')
# 在app.vue 中使用 <route-view/> 进行使用即可

配置 Vuex

# npm 安装
npm install vuex@next --save
# 在 src 目录下新建 store 目录
# 在 store 目录下新建 index.js 文件，并进行配置
```js
import { createStore } from 'vuex'
const store = createStore({
  state: {
    test: 'test'
  },
  mutations: {},
  actions: {},
  getters: {}
})
export default store

在 main.js 中调用

import { createApp } 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store).mount('#app')

在任意组件中调用，查询结果是否正确

<template>
  <h1>{{$store.state.test}}</h1>
</template>
<script>
  export default {}
</script>
<style>
</style>

<a name="Hg4uc"></a>
## 配置路径别名
- 在项目根目录下创建`vite.config.js`文件，有则无需创建
```javascript
// 引入 path 模块
import * as path from 'path'
// 配置别名
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})