vue创建脚手架 cil

亦凉 2023-08-17 16:34 119阅读 0赞

1、检查环境是否安装好了！  
node -v  
npm -v  
npm install cnpm -g --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文件时报错：

![909018-20190723160216444-1378934807.png][]

解决：安装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

[909018-20190723160216444-1378934807.png]: /images/20230810/b9d01de881e643d38d19d4c9e54b948e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关使用vue-cli脚手架创建项目

1.首先肯定要安装node和npm（国内可以使用cnpm镜像\[China npm\]）。 http://nodejs.cn/ ![选择.msi结尾的安装包进行下...

水深无声/ 2024年04月18日 04:04/ 0 赞/ 73 阅读

相关 Vue CLI脚手架创建Vue3项目

1、打开命令窗口切换到项目保存目录 ![在这里插入图片描述][946b8640907049e2b5f376325d23b9ac.png] 2、选择Vue 3创建 !

痛定思痛。/ 2024年04月06日 10:39/ 0 赞/ 85 阅读

相关 Vue 创建脚手架项目

查看当前源地址： npm config get registry 切换至淘宝源： npm config set registry=http://registry.npm

绝地灬酷狼/ 2024年03月24日 09:33/ 0 赞/ 99 阅读

相关 vue创建脚手架 cil

1、检查环境是否安装好了！ node -v npm -v npm install cnpm -g --registry=https://registry.npm.t

亦凉/ 2023年08月17日 16:34/ 0 赞/ 120 阅读

相关 vue-cil项目笔记

文章目录 vue-cil项目笔记 vue-cli 项目搭建 1. 创建项目 2. 使用Ant Design

た入场券/ 2022年12月29日 00:30/ 0 赞/ 152 阅读

相关使用脚手架vue/cli创建vue项目

使用脚手架vue/cli创建vue项目注：使用git bush here不好进行选择操作 1、未安装脚手架，需要安装 npm instal

深藏阁楼爱情的钟/ 2022年12月27日 09:25/ 0 赞/ 225 阅读

相关 Vue脚手架创建项目流程

Vue脚手架创建项目流程图形化创建在创建文件的文件夹打开cmd， > 按住shift右键打开黑窗口，或者直接在文件夹上面路径上面输入cmd 输入`vue u

今天药忘吃喽~/ 2022年12月15日 02:28/ 0 赞/ 188 阅读

相关创建vue 脚手架

1.下载node.js 外网环境会比较卡，可在node.js中文网下载 http://nodejs.cn/download/current/ ![在这里插入图片描述

小灰灰/ 2022年09月10日 14:24/ 0 赞/ 247 阅读

相关通过脚手架--创建vue工程

最近在做vue的项目，其实之前就有做过，一直没有好好整理一下创建项目这块，我想我应该从头梳理一下vue，希望对我自己以及用vue的小伙伴有一点帮助！ 1、首先没有安装nod

怼烎@/ 2022年01月09日 16:59/ 0 赞/ 283 阅读

相关通过vue-cli脚手架创建vue项目

1.确保已经安装完成所需环境 2.进入cmd窗口输入vue ui命令打开可视化界面 3.点击创建按钮进入目录选择 4.选择好目录点击在此创建新项目 5.设置项目

绝地灬酷狼/ 2021年08月27日 12:15/ 0 赞/ 446 阅读