一、安装node.js
二、搭建vue脚手架
sudo cnpm install -g @vue/cli
查看脚手架版本:
vue --version
创建项目:
vue create myapp
第一项和最后一项选择NO,其他默认
cd myapp
npm run serve
删除页面:
创建自己的第一个页面:
路由配置:
三、全局样式配置
1)在src下创建一个styles文件夹,文件夹下创建style.scss作为全局样式,在vue.config.js中进行配置css的主入口文件
//设置样式的主入口
css:{
loaderOptions:{
scss:{
additionalData:`@import "./src/styles/style.scss;"`
}
}
}
防止一个主样式里面写过多样式,可创建其他scss文件,在style.scss中引用:
四、vue和element plus 集成
1)在当前项目下安装element-plus
sudo cnpm install --save element-plus
npm install element-plus --save
2)完整引入:在main.ts中添加相关配置
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
3)测试:找组件复制,在自己创建的vue页面中赋值,控制面板运行npm run serve,运行项目查看结果:
<el-button type="primary">Primary</el-button>
4)按需导入
安装插件
npm install -D unplugin-vue-components unplugin-auto-import
在vue.config.js中添加
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
在css同级下创建
//设置样式的主入口
css:{
loaderOptions:{
scss:{
additionalData:`@import "./src/styles/style.scss;"`
}
}
},
configureWebpack:{
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}