在HBuilder X上创建uni-app项目(使用cli脚手架)

首先,先进行环境配置

(1)、安装node.js。
(在命令行 where node:查位置 node -v:查版本号)
查看包管理工具(npm、yarm、cnpm)
国内的开发者最好先配置淘宝镜像源(npm install -g cnpm --registry=https://registry.npm.taobao.org)
查看镜像源:npm config get registry

(2)、安装代码管理工具git。设置用户姓名和邮箱,设置分支;

git config user.name "用户名"
git config user.email "邮箱"

(3)、安装Vue.js:
npm install -g vue
(4)、安装脚手架:
npm install -g @vue/cli
(vue-cli:搭建项目目录结构;vue-router:实现页面跳转;vuex:实现各个组件间的 参数传递);
检查vue版本的命令:
vue --version

创建uni-app项目

方式一:直接在HBuilder X上创建

在窗口栏找到“文件”=>新建=>项目


在HBuilder X上创建uni-app项目(使用cli脚手架)_第1张图片
image.png

会在HBuilder X会在右下角提示项目创建成功,成功之后的项目目录结构如下:


在HBuilder X上创建uni-app项目(使用cli脚手架)_第2张图片
image.png

方式二:使用命令行(vue-cli)创建

vue create -p dcloudio/uni-preset-vue my-project

创建项目命令.png

注意,在创建的过程中不要按到回车键,因为需要进行模版选项(这里我选的是默认模板),选了之后在进行下一步
在HBuilder X上创建uni-app项目(使用cli脚手架)_第3张图片
image.png

创建成功之后,运行即可。
项目目录结构:
在HBuilder X上创建uni-app项目(使用cli脚手架)_第4张图片
目录结构.png

你可能感兴趣的:(在HBuilder X上创建uni-app项目(使用cli脚手架))