npm创建小程序项目

文章目录

• 一、环境安装
• 二、创建uni-app
• 三、创引入 u view-ui组件库

---

uniapp官网：https://uniapp.dcloud.net.cn/quickstart-cli.html

一、环境安装

         1.全局安装Vue-cli

npm install -g @vue/cli

 

二、创建uni-app

• 使用正式版（对应HBuilderX最新正式版）

  vue create -p dcloudio/uni-preset-vue my-project
  

  复制代码

• 使用alpha版（对应HBuilderX最新alpha版）

  vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
  

  复制代码

• 使用Vue3/Vite版

  • 创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

    npx degit dcloudio/uni-preset-vue#vite my-vue3-project
    

     

    npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project
    

  • 创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

    npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

2.选择创建模板

1.选择创建模板

3.引入 u view-ui

1.引入组件

npm install -g u-view-ui

2.引入sass

npm install sass

3.修改文件

 在src目录下找到uni.scss文件

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

在pages.json文件中

{
// start添加的配置
"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// end添加的配置

	"pages": [],
	"globalStyle": {}
}

将uview-ui挂载到Vue （mian.js）

import uView from 'uview-ui'
Vue.use(uView)

在App.vue文件中引入uview-ui css

<style lang="scss">
	/*每个页面公共css */
	@import "uview-ui/index.scss"
</style>

---