Vue的环境搭建

前言

环境的各种搭配！待续。

1. 安装NodeJs

官网下载

http://nodejs.cn/download/

1.1 配置淘宝镜像

cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

直接配置

npm install --registry=https://registry.npm.taobao.org

2. 安装Vue或者vite

Vue

npm install vue@next

vite

npm init vite@latest

CDN 的vue

3. 安装脚手架

npm install -g @vue/cli

3.1 脚手架创建项目

vue create xxx

4. 配置 element ui

1. 安装

npm install element-plus --save

2. 使用

main.js

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

5. 配置axios

1. 安装

npm install axios

2. 使用

6. 配置项目自动打开

在package.json里

  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

加上–open

7. Eslint 配置

关闭，新建vue.congig.js

module.exports = {
    // 关闭eslint
    lintOnSave:false
}

8. src路径配置

新建一个jsconfig.json文件

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": ["node_modules", "dist"]
}

9. Echarts的配置

CDN

https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js

10. Git安装

官网下载

https://git-scm.com/

全选next

11. scss配置

npm install sass-loader@8.0.2 sass@1.26.5  --save-dev

vue.config

  css:{
    loaderOptions:{
      sass:{
        prependData:`@import "./src/common/css/global.scss";`
      }
    }
  },

12. less配置

npm i less 

npm i less-loader