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

标签：through   get   star   ejs   最新版   one   vue-cli   成功   manage   

主要步骤

• 安装Node.js（Node.js 是一个开源与跨平台的 JavaScript 运行时环境，安装高版本的node.js时会同时安装npm）
• （可选）安装npm或者cnpm（node package manager）（npm是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等））
• 安装webpack（webpack是一个前端资源加载/打包工具）
• 安装elementUI、引入elementUI
• 安装vue-cli（vue-cli是vue.js的脚手架，用于自动生成vue.js模板工程）

  ---

• 安装echarts、引入echarts
• 引入axios

  ---

详细步骤

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 可得：
   

    

    

    

    

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

标签：through   get   star   ejs   最新版   one   vue-cli   成功   manage   

原文地址：https://www.cnblogs.com/sunshine233/p/14138020.html