【小白学习Vue | 1】安装Vue并配置HBuilder

目录一、为什么要学习Vue？二、创建Vue项目（1）安装node.js（2）配置淘宝镜像cnpm（3）安装vue和脚手架工具vue-cli（4）创建项目三、HBuilder配置vue编译环境（1）创建vue项目（2）HBuilder编译vue一、为什么要学习Vue？之前看一句话这里引入：前言：看到几乎大家都用vue写前端，了解了一下，16年才发布Vue，近年优势还是很大的；自己一直使用B...

cungudafa

8267人浏览 · 2019-08-07 14:34:11

cungudafa · 2019-08-07 14:34:11 发布

一、为什么要学习Vue？

之前看一句话这里引入：
在这里插入图片描述
前言： 看到几乎大家都用vue写前端，了解了一下，16年才发布Vue，近年优势还是很大的；自己一直使用BootStrap做简单界面，现在接触了Layui，发现不太满足自己的需求了；有一定前端基础，这里跳过React，直接开始着手Vue的学习，顺带记录。
个人建议：如果从零开始前端学习以及项目较小不持久化，学习BootStrap已经够用了，Vue学习有一定台阶。

整体规划： 先搭建前端，接下来后端，最后整合。

安装配置
学习基本语法
端口配置及api获取
tree树目录、echarts表格
…
总结

这里是第一篇：
（其实网上都是成篇的记录了，由于版本更新以及个人理解，所以还是记录一下，如有错误，欢迎指正）

二、创建Vue项目

环境：Win10 + node10.16.1 + vue

（1）安装node.js

配置node.js环境官网下载，一直next就好，非常方便。

(1.1) 下载官网： http://nodejs.cn/download/
(1.2) 下载完成双击安装（除了自定义安装目录外，一直next）
(1.3) 查看node版本
安装完成打开cmd输入node --version
(1.4) 查看安装环境及了解各文件夹位置（建议操作，只有了解目录位置才能方便后期查找）
在cmd中输入path查看环境变量，安装时自动添加了我们的node环境：

这里有两个文件夹：

安装目录（刚才我们自定义的地方）
第二个目录为node的仓库目录（这里和maven仓库目录是同理的）
在后面安装完镜像和vue后，仓库有：

（2）配置淘宝镜像cnpm

因为npm是国外仓库位置，因为网速原因，建议配置：

（2.1）打开cmd输入

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

在这里插入图片描述

（2.2）查看是否安装成功

cnpm -v

在这里插入图片描述
安装位置就在刚才我们的本地仓库中：

（3）安装vue和脚手架工具vue-cli

安装vue

cnpm install vue

在这里插入图片描述

安装vue-cli

cnpm install --global vue-cli

在这里插入图片描述

（4）创建项目

（4.1）在自己的工作目录下输入cmd快速打开当前位置：
（4.2）创建项目：

vue init webpack helloVue

项目名不能大写
在这里插入图片描述

（4.3）完成后有黄字提示后面操作

进入项目根目录
运行项目（也可以是cnpm镜像仓库）
```
cd helloVue
cnpm run dev
```
扫描配置文件

文件目录：（外层为配置文件）

运行成功提示：（类似tomcat）

（4.4）打开浏览器输入：http：//localhost:8080 会自动跳转到当前界面：

第一个Vue项目创建成功！

三、HBuilder配置vue编译环境

网上大家都有各种编译环境，这里我选择了本机已安装的HBuilder前端编辑器

Hbuider下载地址：http://www.dcloud.io/hbuilderx.html
下载解压即可使用，省去安装

（1）创建vue项目

可以直接导入之前的项目，但为了以后操作方便，这里重新从HBuilder零开始创建一个vue项目

（1.1）文件-》新建-》1.项目
选择普通项目、输入项目名、选择vue模板

文件目录：（与我们之前创建有所差异html位置不同等，但大同小异开始学习）
（1.2）第一步：选中项目右键安装npm install环境（也可以配置cnpm外部命令）

为了方便，我在HBuilder中安装了内置终端插件：

安装完成后，自动运行刚才的命令：npm install（这是告诉系统，vuedemo是一个vue项目，并引入了本地node_modules静态资源）
（1.3）第二步骤：
打开 Readme. md（这里写有常用命令），执行第二步npm run serve

运行结果：（类似tomcat，根据提示打开http://localhost:8080/或html全位置都会提示）

HBuilder搭建成功！

（2）HBuilder编译vue

(2.1)在public目录下创建vuetest.html
（2.2）添加如下代码：（打印一个helloworld）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  {{ message }}
</div>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
new Vue({
    el:'#app',
    data: {
        message:'Hello World!'
    }
});
</script>
</body>
</html>

（2.3）编译【很重要，很重要，很重要】

新打开一个终端
确定在项目根目录下：cd ..
根据readme提示第三步：npm run build
此时，在根目录下会创建一个dist文件夹，里面内容就是编译完成后的资源了，
（类似tomcat下webapp目录中的项目）

在这里插入图片描述

（2.4）选中dist目录下的vuetest.html，通过HBuilder运行工具运行到浏览器

此时效果：（通过HBuilder）端口号为8848

此时，用npm运行的端口号+html文件名，访问的也是同一个界面。

划重点：编译【很重要，很重要，很重要】
每次添加或修改了html后

始终运行npm run serve
另一个终端里
确定在项目根目录下：cd ..
根据readme提示第三步：npm run build

HBuilder支持直接修改dist/vuetest.html的，修改即运行效果

但是：下一次build之后，dist的页面会随着原来项目的文件而修改而覆盖；
个人技巧：

测试时,直接修改dist下的html，方便测试；
测试通过后，再复制到原项目路径下的文件中，这样就节省build的时间而且不会被覆盖。

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}$/, //不连续的两位字母// /^