使用vue快速创建uniapp小程序

安装vue-cli

node版本14

注意这里尽量安装vue-cli4.0版本
要不运行项目的时候会有Cannot find module 'webpack/lib/RuleSet'的错误

npm i -g @vue/cli@4.0
1

创建项目

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

选择模板

建议选择默认模板

项目结构

运行相应的命令编译到对应的平台

yarn dev:mp-weixin会生成dist文件夹，使用微信开发者工具打开dist下的mp-weixin文件夹就可以查看效果了

安装sass

yarn add node-sass@4.14.1 sass-loader7.0.3

注意node-sass 和sass-loader的版本，如果因为这个报错，下载其他版本就行了
目前我使用的版本没有出现不兼容的问题

安装u-view

yarn add uview-ui

1. 在入口文件main.js中引入uview

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

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

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

1
2
3

3. 在App.vue组件中引入

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

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

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

5. 新建vue.config.js文件

module.exports = {
  // publicPath: 'https://e52.nwcloud.cn/api',
  // devServer: {
  //     port: 8009,
  //     proxy: {
  //         '/': {
  //             target: 'http://XXXXXX:8888',
  //             changeOrigin: true
  //         }
  //     }
  // },
  transpileDependencies: ['uview-ui']
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在组件中使用uview

效果图：

到这里基本的框架就OK了，vuex axios 什么的就像vue项目中去下载封装就OK了