使用命令行新建vue2/uniapp小程序项目

这篇具有很好参考价值的文章主要介绍了使用命令行新建vue2/uniapp小程序项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.执行命令创建项目。

vue create -p dcloudio/uni-preset-vue (项目名称)

2.选择模板,需要ts加上ts,一般默认选择默认模板。

使用命令行新建vue2/uniapp小程序项目

 3.新建完成后的package.json,有对应的打包命令, 

使用命令行新建vue2/uniapp小程序项目

  博主报了一个这样的错误,是因为autoprefixer版本过高,降低一下版本即可

使用命令行新建vue2/uniapp小程序项目

​npm i postcss-loader autoprefixer@8.0.0

使用命令行新建vue2/uniapp小程序项目

这里也可以会出现sassloader版本的报错的问题,如果出现查一下版本换一下版本即可。

安装node-sass的时候要用淘宝镜像,npm基本下不下来

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

cnpm install node-sass

 4.打完包之后,把dist下的dev下的mp-weixin包通过微信开发者工具打开,之后在vscode修改保存就可以实现微信开发者工具热更新了。

使用命令行新建vue2/uniapp小程序项目

 5.使用uniapp最火的uview

npm i uview-ui

6.main.js引入uview

import uView from "uview-ui";
Vue.use(uView);

7.在全局样式文件uni.scss中引入

@import 'uview-ui/theme.scss';

8.在pages.json中 配置easycom组件模式

"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	}

9.在vue.config.js中加入

// vue.config.js,如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['uview-ui']
}

10.在pages/index中使用button,下面是效果图

使用命令行新建vue2/uniapp小程序项目

 文章来源地址https://www.toymoban.com/news/detail-484900.html

到了这里,关于使用命令行新建vue2/uniapp小程序项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月05日
    浏览(67)
  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月11日
    浏览(46)
  • uniapp新建项目后,如何在浏览器和微信小程序运行

    第一步:新建项目 参考uni-app官网提供了HBuilderX可视化创建和vue cli命令两种方式创建项目,由于HBuilder和它都是DCloud公司的产品,使用它创建项目可以很方便的下载插件什么的。 新建项目很简单: https://uniapp.dcloud.net.cn/quickstart-hx.html 下载HBuilderX,然后参照这个文档点两下选择

    2024年02月03日
    浏览(36)
  • uniapp 小程序 使用vue3+ts运行项目

    uniapp官网教程:uni-app官网 创建方式有2种 第一种:通过HBuilderX可视化界面创建 第二种:通过vue-cli命令行 注意:若不能直接使用命令下载,可去gitee下载模板使用 下载完模板后进行解压,利用vscode打开文件,会发现报这样的错误👇主要原因是没有下载依赖 解决以上错误:使

    2024年02月13日
    浏览(32)
  • 小程序隐私信息授权wx.onNeedPrivacyAuthorization vue2+uniapp / vue3

    记录一下微信隐私信息授权接口相关配置使用。小程序是uniapp+vue2开发 1.首先需要去到微信公众平台,申请小程序中用到的所有隐私接口。可参考 用户隐私保护指引填写说明 | 微信开放文档 小程序用户隐私保护指引内容介绍 | 微信开放文档 在这里配置和查看需要申请的接口

    2024年02月06日
    浏览(47)
  • vue2,3,小程序,uniapp的API请求封装统一管理请求接口

    目录  微信小程序 request.js api.js页面  页面使用   uniapp request.js封装公共请求头 api.js里面存放api方法 在页面引入方法 vue2、3 request.js封装公共请求头 api.js文件 页面引入   request.js api.js页面  页面使用  引入 注意:微信小程序里面默认不能使用绝对路径,要使用../../../这样

    2024年02月03日
    浏览(58)
  • uniapp在小程序中获取manifest中的版本等配置信息vue2

    vue2版本在根目录新建一个 vue.config.js ,如果没有的话。 写入以下内容 执行的过程 读取 manifest.json 的源文件内容 去掉其中的注释后转为 JSON 数据 写入到 utils/config/version.json ,自己视情况修改路径 读取 import { version } from \\\"utils/config/version.json\\\" 如果有其他要共享的文件也可以这

    2024年02月05日
    浏览(32)
  • uniapp使用cli脚手架创建兼容小程序和h5的项目 自动化命令打包运行

    HbuliderX搭建项目结构: CLI搭建项目结构: CLI方式搭建uniapp项目: 大家可以看下两种方式搭建的项目文件夹目录有什么区别,上面的是HbuilderX模版搭建的小程序项目,下面的是cli搭建的项目,先把my-test项目中src下面的文件全部删除,然后我把小程序代码全部塞进了src文件夹下

    2024年02月16日
    浏览(54)
  • uniapp使用addInterceptor路由拦截(vue2 OR vue3)

    说明 初始版本方法,可能因为能力原因存在不足,请见谅,有问题评论区~~ 主要通过 uni.addInterceptor api进行路由拦截 目前小程序上面对于uniapp提供的路由跳转方式可以实现拦截,自带的返回按钮,底部tabbar切换无法拦截他们的跳转,但是可以监听到to和from h5支持路由全部拦截

    2024年02月09日
    浏览(34)
  • 使用VS Code创建编写uniapp项目(vue3+ts 微信小程序)

    uni-create-view :用于快速创建 uni-app 页面 uni-helper uni-app :代码提示 uniapp 小程序扩展 :鼠标悬停查文档 1.在types属性中添加属性名 @types/wechat-miniprogram 和  @uni-helper/uni-app-types. 2.添加vueCompilerOptions选项 ①在VS Code中找到设置 ②在设置中搜索文件关联 ③添加这两个文件名,值为

    2024年04月27日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包