HBuilderx新建vue项目步骤（使用elementUI）

1. 安装node.js （参考文章：Node.js安装详细步骤教程(Windows版)、'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文 ）
   1. 在官网下载node.js文件并安装；
   2. 按快捷键 win+R ，输入cmd运行命令提示符，输入 node -v， 出现版本号即为安装成功。
   3. 新版的nodejs已经集成了npm，所以npm也一并安装好了。

   4. 修改环境变量和系统变量：参照 'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文 步骤。

2. （可选）安装cnpm
   首先可以用命令 npm -v 测试npm是否安装成功：
   1. 如果要安装cnpm，在命令提示符输入：

      npm install -g cnpm --registry=https://registry.npm.taobao.org

   2. 然后输入 cnpm -v 查看版本号
3. 安装webpack
   1. 全局安装webpack（我的node安装在G盘）

      npm install webpack webpack-cli –g

   2. 本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。安装最新版本输入以下命令：

      npm install --save-dev webpack

      也可以用cnpm安装webpack（把命令中的 npm 改成 cnpm， 其它的安装也都是这样）：

      cnpm install --save-dev webpack

      安装 webpack -cli：

      npm install --save-dev webpack-cli

4. 安装element
   1. 用npm安装element

      npm i element-ui -S

   2. 完整引入element， 如果是用HBuilderX直接新建的elementUI 项目，main.js中则自动写入，这一步可省略。

      在 main.js 中写入以下内容：

      import Vue from 'vue';
      import ElementUI from 'element-ui';
      import 'element-ui/lib/theme-chalk/index.css';
      import App from './App.vue';
      
      Vue.use(ElementUI);
      
      new Vue({
        el: '#app',
        render: h => h(App)
      });

      以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

5. 安装vue-cli（vue-cli是vue.js的脚手架，用于自动生成vue.js模板工程）

   1. cnpm install --global vue-cli 

      ---

6. 1~5的配置只需要配一遍，以后可以直接用HBuilderx新建element项目。
       
7.  运行 App.vue 可得：