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文件时报错：

 

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