vue3+element-plus+router+vuex+axios从零开始搭建(1)vue3+element-plus
vue3+element-plus+router+vuex+axios从零开始搭建(1)vue3+element-plus
vue3+element-plus
因为需要一个后端管理系统的界面，所以学习从0开始搭建一个前端框架便于后续使用.
这一章主要是版本选择和基础安装功能。
代码会放到https://github.com/solate/vue-demo
安装步骤
下载
1.下载node, 不要使用最新的版本element-plus组件没支持到最新的版本。
brew install node
➜ ~ node -v
v14.17.0
➜ ~ npm -v
6.14.132.安装vue-cli,
npm install -g @vue/cli如果太慢需要使用cnpm安装, 使用下面的命令安装cnpm
npm install -g cnpm -registry=https://registry.npm.taobao.org版本信息
➜ ~ vue --version
@vue/cli 4.5.13vue项目创建
vue create dashboard选择自定义模式
多选vuex, router, css等，可以根据自己的需要添加
选择3.x,
最终选择
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 servevue 项目第一步就搭建完成了
element-plus
element-plus 是针对vue3的前端组件, 这里和2.x有些区别，需要vue-cli@4.5。
npm install element-plus --save在 main.js 中写入以下内容：
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");在 HelloWorld.vue中添加一个按钮
<div class="hello">
<el-button>默认按钮</el-button>
....其他代码
</div>然后运行项目， 结果如图
这样vue3和element-plus就都安装好了。
其他
修复问题
安装element-plus的时候提示有错误， 执行就修复好了
npm audit fix --forceelement+vue2.x 的时候
开始安装ElementUI, 在cmd中打开vue项目文件夹，输入命令
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.1Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime
然后根据搜索，解决node-sass版本问题。
npm uninstall --save node-sass
npm uninstall --save sass-loader
npm cache clean -f
npm install --save node-sass
npm install --save sass-loader然后我的package.json中的版本是这样的
"node-sass": "^5.0.0",
"sass-loader": "^10.1.0",node-sass解决了，然后启动后，整个界面是白色的，什么元素都没有，浏览器报错：prototype undefined，然后搜到下面这个。
vue-cli4创建项目导入elementUI，浏览器报错Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
然后使用上面说的修改@vue/cli@3.12.1 但是不成功，所以选择了第一种方法
删除程序, 然后选择2.x版本修复问题。
vue.config.js 错误
然后发现 vue.config.js的错误
以前使用 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";
^找不到这个文件，然后我修改为自动添加的这个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
>> /*然后我复制一份放到/assets/scss/目录下，修改为
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/scss/element-variables.scss";`
}
}
}成功出现el-buttion标签, 解决问题