最近开始着手创建vue web项目,安装流程(连接)搭建好了环境,然后想使用element-ui框架的时候竟然发现出了错。如果你也有这样的问题,请继续看下去吧。
一、安装element-ui安装官方element-ui文档的安装方法安装。在npm中输入如下命令:
npm i element-ui -S
安装成功后就会发现就你的项目依赖目录下多了一个【element-ui】文件夹。因为文件太多了有点难找,直接搜就能搜出来,如果没有可以再执行一下上面的命令,因为我第一次也没安装成功呢。
如图:
文章图片
二、引入引入文件到相应的文件当中去,不过一般都是在main.js中全局引入,这样其他的文件不用多次引入也可以直接使用了。如图,是我在初次新建main.js中新增的语句,是引入element-ui的关键。
文章图片
三、使用到element-ui中复制一段html代码块过来测试一下,开始我是直接放在index.html中,发现是不行的,出错了。这就是我想说的重点,之所以出错是找不到模版吧。所以一定是要模版.vue后续的文件。所以我把代码复制到项目自带的测试文件【HelloWorld】中就可以了。
文章图片
文章图片
四、创建模版vue文件上面的例子是拿项目原来就有的测试文件来用了,那怎么自己快速创建项目vue模版文件呢?
1、定义模版
按住【shift】+【ctrl】+p,调出控制台,在上面输入【snippet】回车,然后再输入vue,vscode会生成一个文件,这就是我们要创建模版的地方,不过里面的语句都是注释了的,我们可以自己添加进去自定义模版。
如下:
文章图片
"Print to console":{
"prefix": "vue",
"body": [
"<
template>",
" <
div class=\"wrapper\">$0<
/div>",
"<
/template>",
"",
"<
script>",
"export default {",
" props: {",
" },",
" data () {",
" return {",
" }",
" },",
" created () {},",
" mounted () {},",
" watch: {},",
" computed: {},",
" methods: {},",
" components: {},",
"}",
"<
/script>",
"<
style scoped>",
"<
/style>"
],
"description": "A vue file template"
2、新建vue文件
【vue项目中引入element-ui框架的流程和注意事项】定义模版之后保存好,重启一下vscode,然后再【components】模版文件夹中新建文件,再新建的文件中输入vue然后直接按【TAB】键就生成了模版了。是不是很快呢,我也很喜欢用正方法。
文章图片
推荐阅读
- 微信小程序开发工具——像web页面那样简单开发
- vue开发的手机网页如何在手机测试查看
- 好用的vue开发工具和插件——力荐篇
- vue开发微信小程序图标如何引入的问题——已解决
- vue开发环境的搭建安装操作手册——七步搞定
- 计算机病毒–从新手到专业人士
- JavaScript for-in循环详细用法指南
- PHP中的关联数组详细介绍
- 算法(递归函数检查字符串是否是回文)