vue+element+less項目搭建
- 创建Vue项目
vue官网链接:http://doc.vue-js.com/v2/guide/
- 安装node.js
- 安装Vue并新建项目
# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
npm install
//運行
npm run dev
浏览器打开vue默认界面则运行成功
2.配置element(vue前端UI 框架)(可不配置)
官網:http://element.eleme.io/#/zh-CN/component/installation
npm 的方式安装,項目路徑下運行
npm i element-ui -S
在 main.js 中写入以下内容:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
複製框架代碼測試
3.配置less(创建Vue项目时,可选择配置sass,也可不配置)
Less項目目錄下需要装两个loader
npm install less --save-dev
npm install less-loader --save-dev
然后在组件或者视图中给样式加上语言就可以了
<style lang='less'>
@import (reference) "../assets/less/common.less";
</style>
@import (reference) "../assets/less/common.less";
用于引入less文件,其中reference用於解決less編譯兩次的問題
使用@import引入文件報錯
npm install style-loader css-loader