vue新手入门学习,经常会看到别人代码中用到的控件,但是前端后端和移动端的都不太一样,就算是知道一点在如此告诉发展框架的时候也是一头雾水啊,对于我刚入门vue来说,今天突然看到github上有大神的代码使用了element-ui,其实一开始我还以为模板里的全都是html控件的。
于是就新建一个工程,然后开始使用这玩意,但是在webstore一直没有提示还带有警告。好尴尬,折腾了好久才知道需要安装element模块
1、在工程下的package.json中查看,直接搜素element会看到是否安装该模块。
2、没有安装在项目中打开命令行输入回车:
npm install element-ui --save
3、下载完模块以后我们需要引入到我们的项目中,切换到src下的main.js引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
4、在webstore上的helloworld.vue的template模板下试试,是不是提示了呢?
上面的问题解决以后,突然发现停留在大学的html+css写东西已经不适合现在了,应该说满足不了我们了,对于前端来说有时候控件的渲染靠css,但是假设两个控件是差不多但又不一样,在传统的css要写两遍甚至更多次,css-loader能帮我解决这样问题。
1、打开命令行输入
npm install --save-dev css-loader
2、在src下新建一个style文件夹新建一个test.less文件,在内部书写随便书写一段代码,测试,假设我这边去处理宽高。
//宽高
.wh(@width, @height){
width: @width;
height: @height;
}
3、在helloworld.vue的style中引入
<style lang="less" scoped>
@import "../style/test";
.login_page{
.wh(320px, 210px);
}
</style>
是不是觉得方便了很多,写一行代码就搞定了,以前宽高的写两行。好了完工,收工。。。新手记录求大神指导
网友评论