vue3+element-plus+router+vuex+axios从零开始搭建(1)vue3+element-plus

brew install node

➜  ~ node -v
v14.17.0
➜  ~ npm -v
6.14.13

npm install -g @vue/cli

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

➜  ~ vue --version
@vue/cli 4.5.13

vue create dashboard

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallbackin production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

cd dashboard
npm run serve

npm install element-plus --save

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import App from "./App.vue";
import router from "./router";
import store from "./store";

const app = createApp(App);
app.use(ElementPlus);
app.use(store);
app.use(router);
app.mount("#app");

  <div class="hello">
    <el-button>默认按钮</el-button>
    ....其他代码
  </div>

npm audit fix --force

    vue add element

How do you want to import Element? Fully import  // 选择全局还是按需引入-全局
Do you wish to overwrite Element's SCSS variables? Yes  // 是否使用SCSS-是
Choose the locale you want to load zh-CN  // 选择语言-中文

Syntax Error: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1

npm uninstall --save node-sass
npm uninstall --save sass-loader

npm cache clean -f

npm install --save node-sass
npm install --save sass-loader

    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.0",

以前使用 data
版本 8 中使用 prependData
sass 版本 9 中使用 additionalData

module.exports = {
  chainWebpack: config => {
    //设置别名
    config.resolve.alias.set("@", resolve("src"));
  },
  devServer: {
    open: true //打开浏览器窗口
  },
  //定义scss全局变量
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/scss/global.scss";`
      }
    }
  }
};

 error  in ./src/element-variables.scss

Syntax Error: SassError: File to import not found or unreadable: @/assets/scss/global.scss.
        on line 1 of src/element-variables.scss
>> @import "@/assets/scss/global.scss";

   ^

css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/element-variables.scss";`
      }
    }
  }

Syntax Error: SassError: An @import loop has been found:
           src/element-variables.scss imports src/element-variables.scss
        on line 1 of src/element-variables.scss
>> /*

css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/scss/element-variables.scss";`
      }
    }
  }