基于Vue的前端网页开发-安装及脚手架搭建

一、安装需要的组件

第一步，下载node.js并安装

官网地址：  Download | Node.js

 我的电脑是windows系统，点击Windows Installer即可下载

第二步，VUE.js引入

vue.js的引入有几种方法：

方法一：下载vue.js文件并使用 <script> 标签引入

方法二：

推荐如下几个线上版本：

• Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

• unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js。

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

 方法三：使用npm或cnpm安装

npm在安装node.js时自动安装，使用npm下载较慢，推荐使用淘宝NPM 镜像，安装完后可使用cnpm命令。

安装淘宝NPM 镜像 ：

安装命令：npm install -g cnpm --registry=https://registry.npmmirror.com
安装vue： cnpm install vue

VUE官方教程：https://v2.cn.vuejs.org/v2/guide/installation.html安装 — Vue.jsVUE官方教程：https://v2.cn.vuejs.org/v2/guide/installation.html

 第三步，安装vue-cli脚手架工具

cmd命令行窗口输入如下命令：

npm install -g vue-cli

或：cnpm install -g vue-cli

第四步，安装编译器

推荐：HBuilder X

或者：VS CODE

二、搭建vue脚手架

1. 通过命令行创建：

cmd切换至项目目录后，运行如下命令：

vue init webpack my-project 

运行如下命令后进入项目：
cd my-project

运行项目
npm run dev

创建完成后，使用HBuilder X打开创建好的项目进行编辑：

文件-打开目录-选择文件夹

2. 使用编译器HBuilder X创建项目

 点击：文件-新建-项目，选择模板开始创建项目

3. 编辑并调试项目

HBuilder X上点击：运行-运行到终端-npm run dev

点击预览按钮，安装内置浏览器插件，预览页面

 若没有自动打开，点击如下网址打开

 打开后如下所示，即可开始编辑代码进行调试了