HBuilderX搭建Vue项目

HBuilderX搭建Vue项目

1. node安装

vue的运行依赖node.js，需要先安装node.js。
下载地址：https://nodejs.org/en/download/
不要改安装路径，改了后续可能会出很多问题，根据安装向导安装即可。

1.1 查看node版本

1.2 查看npm版本

升级npm版本：npm install npm -g

1.3 使用npm镜像

npm 版本需要大于 3.0，如果低于此版本需要升级它：
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用cnpm 命令来安装模块了：

1.4 安装vue相关

1.4.1

cnpm install vue

1.4.2

全局安装脚手架：cnpm install --global vue-cli

查看脚手架是否安装成功：

1.5 命令行初始化项目

vue init webpack “项目名称”；
这里需要进行一些配置，默认回车即可；
对于语法检查可选择no；

1.5.1 命令行启动项目

进入项目，安装并运行；

2. 搭建项目

新建项目——选择vue项目，HBuilderX就会自动创建好项目。

生成的vue项目结构：

3. HBuilderX配置

3.1 运行配置

3.2 工程安装npm

第一次需要先下载插件，下载完毕再次执行npm install；

安装比较慢，请安心等待。
安装成功之后，项目目录下会多出一个node_modules文件夹，这是核心吧。

4. 项目启动

1. 安装：npm install;
2. 编译：npm run build;
3. 启动：npm run server;

访问：http://localhost:8080/