vue创建脚手架 cil
1、检查环境是否安装好了!
node -v
npm -v
npm install -g cnpm -registry=https://registry.npm.taobao.org
cpm -v (版本与npm的不一样的) cnpm@6.0.0
全局安装vue-cli
cnpm install -g vue-cli
2、创建vue项目
1)vue -V 查看vue版本号
2)vue init webpack 开始创建
输入项目名 即可创建vue项目
3)cnpm install 安装依赖
4)npm run dev 启动项目
vue-loader命令:
1、打包正式环境
npm run build:prod
2、打包测试环境
npm run build:sit
3、克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
4、安装依赖
npm install
5、启动项目
npm run dev
6、安装sass-loader依赖
npm install sass sass-loader --save-dev
7、自动修复
npm run lint -- --fix
8、安装主题
npm i element-theme -g (全局安装)
eg.npm i element-theme-chalk -D
9、-w(启动实时编译)、-o(指定打包目录)
引入scss文件时报错:
解决:安装scss
安装scss
npm install sass-loader --save
npm install node-sass --save
二、样式
1)修改组件的样式,但是只作用于当前页面,其他页面不受影响,做法有两种:
法一:使用/deep/
1)在当前页面添加<style lang="scss" scoped>
自定义类名 /deep/{
element ui选择器类名{
样式
}
}
</style>
2):在其他页面写样式再导入到所需页面
scss文件写法:
自定义类名 /deep/{
element ui选择器类名{
样式
}
}
.vue页面引入(必须加scoped):
<style lang="scss" scoped>
@import "../../../styles/demo.scss";
</style>
法二:使用>>>也可实现相同效果(注意不要scss的预处理样式,否则也是没效果的)
<style scoped>
.xxx >>> .el-checkbox__label {
color: red;
}
</style>
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/11232346.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」