使用vue cli创建uniapp小程序项目_uni-app 用vuecli来创建

一、创建项目

1. npm install -g @vue/cli全局安装vue cli
2. vue create -p dcloudio/uni-preset-vue my-project 其中my-project是项目名称
   选择默认模板
3. 运行npm run serve在这浏览器中打开项目, 且相应改动在浏览器中都能看到对应效果
   注: 若想通过微信小程序开发工具查看项目, 可将项目代码拖入HBuilderX, 进行编译, 然后打开微信开发工具查看

二、引入u-view和sass, u-view的前置条件是需要有sass

1. npm i sass -D
2. npm install uview-ui@1.8.4
3. main.js中引入

// main.js
import uView from "uview-ui";
Vue.use(uView);
1
2
3

在uni.scss中

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

在App.vue的首行引入

//App.vue
<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>
1
2
3
4
5

在pages.json中配置easycom

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}
1
2
3
4
5
6
7
8
9
10
11