前端Vue.js的使用教程

1、环境准备

---

1.1 安装Node.js

到Node.js 官网下载合适的版本，直接安装
安装完成之后在命令行(注意以下操作若无特别说明均需在对应文件中打开cmd运行)中用npm -v 命令进行验证

1.2 安装nrm

nrm是一个NPM源管理器，允许快速的切换NPM源，初始源为国外服务器下载速度慢，切换源达快速下载的目的。

安装
npm install -g nrm
-g 表示全局使用
查看当前源
nrm ls
切换淘宝源
nrm use taobao

2、项目创建

---

2.1 初始化文件

npm init --yes

---yes默认所有安装选项

2.2 安装依赖

---

2.2.1 安装方法

以jquery为例，npm install jquery下载的依赖会在node_modules文件夹中，且会在package.json文件中生成

  "dependencies": {
    "jquery": "^3.6.3"
  },

在上传项目时一般忽略node__modules文件，因为该文件多数情况下较大。要根据package.json中的依赖完成环境准备。

老版本npm采用下面带参数的依赖安装方式==- -save==
npm install axios --save

安装模块，仅作为开发依赖，不参与打包
npm install less --save-dev
打开package.json

"devDependencies": {
    "less": "^4.1.3"
    },

2.2.2 安装vue-cli

上面介绍了依赖的安装方法，下面可以通过官方预置的脚手架完成快速搭建，安装如下：
npm install -g @vue/cli
验证版本是否正确vue --version

2.3 开始创建

---

切换到要创建项目的文件目录下，启动vue项目管理器vue ui在创建下选择创建项目，预设这里选择手动，查看配置
Babel 支持js新语法
Router vue的路由
Linter/Formatter 代码格式检查 (可以去掉)
命名完成后，保存预设并创建项目。
这时我们便完成了项目的创建，接下来在本地资源管理器中，找到该项目拖入HBuilder X中即可进行开发

2.4 启动项目

---

方法一：打开http://localhost:8000在任务中选择serve，点击运行。
方法二：在对应项目的文件夹下运行cmd，输入npm run serve。这个方法会更快，因为不用打开图形界面，将Local：后的链接打开，就是运行结果
方法三：在HBulider X中的终端下进行操作。