安装和新建vue-uniapp项目

1、安装nodejs和npm后

2、全局安装脚手架工具vue-cli

命令npm install --global vue-cli


11140317-438971e0911482ca.png
cd到nodejs的目录下去安装vue

3、监测vue是否配置好

命令vue -V

11140317-43ce0611dacfc23b.png
出现版本号就是安装成功了

4、开始使用Vue创建项目(可以先进入自己想要创建项目的文件夹中)

命令vue init webpack vue_test    (vue_test是自己的项目名字)

11140317-8968ae26c720d61d.png
红线区域选no就好


11140317-5a4913c67fad0c0e.png

5、cd到刚刚创建的目录下面,运行vue项目


11140317-d8deba1c4a0448ac.png


11140317-092a4784684507f3.png
11140317-368b9e086194574c.png

6、项目目录如下


11140317-df9dc515f2b20cb4.png

7、vue项目目录说明


11140317-4b782588d8b99f7b.png
11140317-3de1fb2c0bc48c83.png
官方介绍

build:项目构建(webpack)相关代码

config:配置目录,包括端口号等

node_modules:npm加载的项目依赖块

src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

assets: 放置一些图片,如logo等

components:该目录里存放的我们的开发文件组件,主要的开发文件都存放在这里了

App.vue:项目入口文件

main.js:项目的核心文件

router:路由配置目录

static:放置一些静态资源文件

test:初始测试目录,可删除

.xxxx文件:这些是一些配置文件,包括语法配置,git配置等

index.html:首页入口文件

package.json:项目配置文件

README.md:项目的说明文档,markdown 格式




*还有好多不懂的地方。边学习边记录

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要使用HBuilder X创建vue2的uni-app项目,首先需要下载并安装HBuilder X。可以从官方网站下载并按照指南进行安装安装完成后,打开HBuilder X,选择“新建” -> “项目”,然后选择uni-app项目类型。填入项目名称,并选择项目保存地址。在选择模板时,可以选择uni-ui项目模板。确认选择vue版本为2后,点击创建。 HBuilder X会自动下载相应的项目模板,下载完成后,可以在左侧的项目列表中看到刚刚创建项目。 接下来,我们可以通过删除多余的代码、创建文件目录以及梳理项目文件结构的方式来开始项目的开发。 在项目的目录结构中,可以看到一些常见的目录,比如api、common、components、pages等。这些目录用于存放不同的功能模块和页面。 在api目录中,可以存放业务接口API的文件,比如bussinessApi.js用于存放业务接口的定义,request.js用于封装请求方法。 在common目录中,可以存放项目相关的公共js方法、公共css等文件。比如common.scss用于存放项目的公共样式,formatDate.js用于封装日期格式化方法,storage.js用于封装本地存储方法,utils.js用于存放常见的通用功能和工具方法。 在components目录中,可以存放符合vue组件规范的uni-app组件。 在pages目录中,可以存放业务页面文件。 在static目录中,可以存放应用引用的本地静态资源,比如图片、视频等。 其他文件如store目录用于vuex,unpackage目录用于打包APP时忽略的目录等。 在创建项目后,可以根据具体需求修改和调整文件结构,以便更好地组织项目代码和资源。 总之,使用HBuilder X创建vue2的uni-app项目可以通过下载并安装HBuilder X,然后按照指南创建项目,并根据需要梳理和调整项目的文件结构来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [从零开始创建一个uni-app项目](https://blog.csdn.net/Serena_tz/article/details/127802006)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值