ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

uni-app创建项目及使用 vant-weapp

2021-04-29 13:01:49  阅读:294  来源: 互联网

标签:vue vant 项目 -- app weapp json uni


创建项目

一、 使用 DCloud 公司提供的 HBuilderX 来创建项目
二、 使用脚手架搭建项目 ( 以微信小程序为例 )
  • 全局安装 npm install -g @vue/cli

  • 创建项目 vue create -p dcloudio/uni-preset-vue my-project

    • 选择模板(这里选择了默认模板):
    • 创建成功
  • 启动项目(微信小程序) npm run dev:mp-weixin,上一步中创建成功的提示中 npm run serve 运行的是h5,因为 uni-app 可以做不同的小程序,所以会有很多的运行和打包命令,具体的可以看项目的 package.json 文件。

  • 运行成功后,将dist文件夹中dev文件下生成的对应的文件(mp-weixin)导入到微信开发者工具中

安装使用 scss 预编译语言 (可选,也可以使用less)
  • 安装 npm install sass-loader node-sass
  • 使用 <style lang='scss'></style>
项目目录
node_modules               --> 项目的依赖
public                     
  |-- index.html           --> uni-app 开发网页应用时的模板
src                        
  |-- pages                --> 项目的页面组件
  |-- static               --> 项目的静态资源
  |-- APP.vue              --> 应用配置,用来配置APP全局样式以及监听
  |-- main.js              --> Vue初始化入口文件
  |-- manifest.json        --> 配置应用名称、appid、logo、版本等打包信息
  |-- pages.json           --> 配置页面路由、导航条、选项卡等页面类信息
  |-- uni.scss             --> 项目的scss全局变量
.gitignore
babel.config.js            --> 处理javascript版本问题(ES6-->ES5)
package-lock.json
package.json               --> 项目包的描述(运行/打包命令、所安装的第三方依赖)
postcss.config.js          --> 定义如何编译css代码
README.md                  --> 项目的说明
tsconfig.json              --> 项目使用ts开发时的配置

使用 vant-weapp UI库

一、 在跟目录下创建wxcomponents(文件名不可更改),在该目录下新建 vant 文件夹
二、 下载并引入vant-weapp
三、 在 App.vue 导入全局样式
四、 在 pages.json 中引入对应的组件
  • 在某个页面中单独使用

  • 在全局使用

标签:vue,vant,项目,--,app,weapp,json,uni
来源: https://www.cnblogs.com/aloneer/p/14717513.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有