当前位置：首页 > news >正文

uniapp 项目基础搭建（vue2）

news 2025/7/8 9:24:51

一 .创建项目

创建项目可以通过工具创建，也可以通过脚手架下载

1.通过工具创建

2.通过脚手架下载

安装脚手架
npm install -g @vue/cli
下载项目模板
vue create -p dcloudio/uni-preset-vue 项目名称

二. 下载相关依赖

1. 项目默认是没有package.json文件的，可以通过运行npm init -y来创建
npm init -y
2. 安装uniapp的 ui库
   npm i uview-ui@2.0.37
在main.js文件中将uview-ui导入
import uView from 'uview-ui';Vue.use(uView);
在uni.scss文件中导入uview的主题文件
@import "uview-ui/theme.scss";
在app.vue引入uview基础样式，在第一行，并且要加上lang="scss"
<style lang="scss">
@import "uview-ui/index.scss";/*每个页面公共css */
</style>
在page.json中配置easycom动态引入uview组件
	"easycom": {"u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},
{"easycom": {"u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}
测试：

导入一个组件，看看能否自动导入 uview官网

在index.vue中添加以下代码
    <u--text type="primary" text="主色"></u--text><u--text type="error"   text="错误"></u--text><u--text type="success" text="成功"></u--text><u--text type="warning" text="警告"></u--text><u--text type="info"    text="信息"></u--text>