Vue.js项目中使用element-ui控件

1、在已经安装了nodejs的机器上，使用命令提示符进行vue项目创建，命令为

vue init webpack vue-project

如下图所示：

2、继续执行命令

cd vue-project

npm run dev

编译完成后，提示应用程序已经运行在某个端口上，如下图所示：

3、通过访问地址，可以看到一个vue的项目框架就已经搭建好了，如下图所示：

4、我们在命令行中输入code . 来使用Visual Studio Code打开该vue项目，如下图所示：

5、在创建好Vue项目中，通过npm的方式安装element-ui，它能够更好地和

webpack打包工具配合使用，我们在VS Code中打开终端，输入命令

npm i element-ui -S

，如下图所示：

6、打开src/main.js，通过import引入element-ui组件及样式文件，并添加到全局Vue实例中，如下图所示：

7、我们修改components/HelloWorld.vue文件，可以使用<el-button>控件，代码如下图所示：

8、在终端上使用 npm run dev 运行页面，然后通过浏览器访问vue项目的地址，效果如下图所示：