vue项目中引入element-ui框架的流程和注意事项

最近开始着手创建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】键就生成了模版了。是不是很快呢，我也很喜欢用正方法。