软件安装

1、git

git --version  # 查看是否安装成功

# 使用前配置
git config --global user.name '用户名'  # 设置用户名
git config --global user.email '邮箱名'  # 设置邮箱
git config --list  # 查看设置

2、Visual Studio Code（安装包）

3、nvm

🖥️ 教程1 🖥️ 教程2

nvm install 16.16.0  # 安装node.js版本
nvm use 16.16.0  # 切换使用node.js版本

# 查看是否安装成功
node -v
npm -v

# 安装 yarn
npm i -g yarn

# 查看镜像地址
npm config get registry
# 查看镜像地址
npm config set registry https://registry.npmmirror.com

4、cmder（可装可不装）

脚手架安装

# 脚手架安装
npm install -g @vue/cli
# 或者
yarn global add @vue/cli

# 查看脚手架
vue -V 或 vue --version

项目创建

vue create 项目名

element-ui

# 安装
npm i element-ui -S
# 按需引入
npm install babel-plugin-component -D

babel.config.js

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

main.js

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

vue-rouer

• v3.x 版本 —— Vue2
• v4.x 版本 —— Vue3

# 安装
npm install vue-router@版本号

# 例如
npm install vue-router@3.6.5

版本号查询网站：https://www.npmjs.com，输入 vue-router 可查看最新的版本号

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 1、定义 (路由) 组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'

Vue.use(VueRouter)

// 2、定义路由
const routes = [
  { path: '/home', component: Home },
  { path: '/user', component: User }
]

// 3、创建 router 实例
const router = new VueRouter({
  routes
})

export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// 4、创建和挂载根实例
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

less

# 安装
npm install -g less
出现 Module not found:Error:Can't reslove 'less-loader' 错误
原因：版本太高，不适合 npm run serve
解决：npm install --save-dev less-loader less

# 例如
npm i less@4.1.2
npm i less-loader@6.0.0

sass

npm install node-sass sass-loader --save-dev
npm install vue-router --save

vuex

# 安装
npm i vuex@3.6.2

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

// 4、创建和挂载根实例
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

axios

# 安装
npm install axios

src/utils/request.js

import axios from "axios"

const http = axios.create({
  baseURL: '/api',  // 通用地址的前缀
  timeout: 10000,  // 超时时间
})

// 添加请求拦截器
http.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
http.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default http

src/api/index.js

import http from '../utils/request'

// 请求首页数据
export const getData = () => {
  // 返回一个 promise 对象
  return http.get('/home/getData')
}

echarts

# 安装
npm install echarts

# 例如
npm install echarts@5.1.2

适配

https://zhuanlan.zhihu.com/p/657823409

https://www.jianshu.com/p/7acdb535fcd5