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>

轉載于:https://www.cnblogs.com/LindaBlog/p/11232346.html

總結

以上是生活随笔為你收集整理的vue创建脚手架 cil的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。