【小白学习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...
目录
一、为什么要学习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的时间而且不会被覆盖。
前往低代码交流专区
更多推荐
17
0- 0
已为社区贡献8条内容
所有评论(0)