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

主要步骤安装Node.js（Node.js 是一个开源与跨平台的 JavaScript 运行时环境，安装高版本的node.js时会同时安装npm）（可选）安装npm或者cnpm（node package manager）（npm是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等））安装webpack（webpack是一个前端资源加载/打包工具）安装elementUI、引入e

丿TK丶灬丨爱悦

3869人浏览 · 2022-05-02 23:32:58

丿TK丶灬丨爱悦 · 2022-05-02 23:32:58 发布

安装node.js （参考文章：Node.js安装详细步骤教程(Windows版)、'webpack' 不是内部或外部命令,也不是可运行的程序或批处理文 ）
1. 在官网下载node.js文件并安装；
2. 按快捷键 win+R ，输入cmd运行命令提示符，输入 node -v，出现版本号即为安装成功。
3. 新版的nodejs已经集成了npm，所以npm也一并安装好了。
4. 修改环境变量和系统变量：参照 'webpack' 不是内部或外部命令,也不是可运行的程序或批处理文步骤。
（可选）安装cnpm
首先可以用命令 npm -v 测试npm是否安装成功：
1. 如果要安装cnpm，在命令提示符输入：
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
2. 然后输入 cnpm -v 查看版本号
安装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
```
安装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 的引入。需要注意的是，样式文件需要单独引入。
安装vue-cli（vue-cli是vue.js的脚手架，用于自动生成vue.js模板工程）
1. ```
cnpm install --global vue-cli 
```
1~5的配置只需要配一遍，以后可以直接用HBuilderx新建element项目。
运行 App.vue 可得：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^