Vue学习(一)--项目搭建之使用HBuilderX创建vue项目

vue

一.环境部署

(1)安装npm

npm称为 Node package Manager, 是一个基于Node.js的包管理器,安装node.js后会自动安装npm,安装后在cmd中查看npm版本

npm -v

(2)由于网络原因, 通过cmd安装cnpm(中国 npm 镜像的客户端)

npm install -g cnpm --registry-https://registry.npm.taobao.org

vue-cli">(3)通过cmd安装vue-cli

cnpm install -g @vue/cli

(4)通过cmd安装webpack,webpack 是js打包器(module bundler)

cnpm install -g webpack

相关截图如下所示


vue项目">二.创建vue项目

(1)cmd切换到项目目录,输入命令

vue ui

(2)自动弹出Vue项目图形化管理界面

(3)“创建”-“在此创建新项目”

(4)填写相关信息


(5)等待项目创建完成

(6)项目创建完成

三.项目开发

(1)用HBuilderX打开目录


public: 打包后用于部署到生产环境下的目录 src:开发目录 assets:存放资源文件 components: 项目组件目录 APP.vue: 项目入口文件,完成组件的引入工作

(2)运行项目

(3)页面输入\'http://localhost:8080/\' 打开项目

(4)在HBuilderX中新建组件并调用

1.在components目录下右键新建vue文件,命名为\'nComp.vue\'

2.在nComp.vue中编辑组件内容

3.在APP.vue中引入nComp.vue组件


(5)保存,转到项目页面,nComp.vue成功引入

以上是 Vue学习(一)--项目搭建之使用HBuilderX创建vue项目 的全部内容, 来源链接: utcz.com/z/380202.html

回到顶部