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. 项目启动
- 安装:npm install;
- 编译:npm run build;
- 启动:npm run server;
访问:http://localhost:8080/