一、uni-app脚手架搭建
1、全局安装（只需要安装一次）

npm install -g @vue/cli

2、创建项目

vue create -p dcloudio/uni-preset-vue my-project（my-project为你的项目名称）

3、启动项目（微信小程序）

npm run dev:mp-weixin	

创建完成后的项目结构如下：

微信小程序项目目录结构

4、微信小程序开发者工具导入项目

二、搭建过程可能出现的问题
1、容易出现vue和vue-templage-complier版本不一致的问题

此时根据提示重新安装对应的vue版本即可

npm install vue@2.6.10   或  npm i vue-template-compiler@2.6.10(你的vue版本号)

然后再重新运行项目

npm run dev:mp-weixin

2、vue不是内部或外部的命令
首先确定是否安装了node.js 和 全局vue-cli

2.1安装node.js，在Node.js官网（https://nodejs.org/en/download/）进行安装包下载，安装完成后可以打开命令行，直接使用node -v命令， 可以查看安装成功后的版本号

2.2安装 全局vue-cli 命令：npm install -g vue-cli,然后 查看 vue -V 是否可以执行 ，如果还是显示 vue不是内部或外部命令 ,然后配置一个Path系统变量就可以解决
配置步骤如下：

• 首先 在计算机中全局搜索 vue.cmd
  

• 搜索结果

• 将vue.cmd的路径加入Path环境变量中 即可。如我的路径是“C:\Users\Lenovo\Program Files\nodejs\node_global”。

• 打开Path环境 的步骤
  
  这样就OK了
  继续测试 输入vue -V

命令： vue -V ,切记 -V 必须大写

3、npm install -g @vue/cli出现 ERR!

先用npm uninstall vue-cli -g 卸载脚手架 ，安装淘宝镜像

使用淘宝镜像:

1>.官方网址：http://npm.taobao.org；

2>.安装：npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

3>.注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。

4> 如何更新npm的方法： 可以使用 npm install -g npm 来更新版本

然后cnpm install vue-cli -g安装，安装完成后使用vue -V测试是否安装成功 ，然后创建项目的npm命令变成cnpm

三、项目目录

官方文档：https://uniapp.dcloud.io

| App.vue 应用配置，用来配置App全局样式以及监听
| main.js Vue初始化入口文件
| mainfest.json 配置应用名称、appid、logo/版本等打包信息
| pages.json 配置页面路由、导航条、选项卡等页面类信息
| uni.scss 内置的sass变量，可以直接使用

|—pages
| |_ index
| index.vue 页面组件
|
|__ static 静态资源(这个文件里可以存放图片之类的，但不能放样式，vue不会解析css样式)
logo.png

四、样式和sass

1、支持小程序的rpx和h5的vw、vh
2、内置有sass的配置，只需要安装对应的依赖即可

	npm  install sass-loader node-sass

3、vue组件中，在style标签上加入属性