通过 vue-cli 创建 uni-app 项目_uniapp cli vue2

通过npm下载创建项目，参考官网链接（https://uniapp.dcloud.io/quickstart-cli）
此文章是使用vue2创建的
前置：
已经全局安装了vue-cli，window+R输入cmd回车可出现， vue -V查看脚手架版本及安装

如果没安装，则执行以下命令（全局安装脚手架）

npm install -g @vue/cli
1

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

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

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，如下所示：

（我一般只选择默认模板）

2. 通过package.json结合.env配置不同命令打包不同的域名，区分线上和测试环境，以下是测试环境的配置：

"buildBeta:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build  --mode beta",
1

3. 下载H5的控制台（vconsole），方便手机调试H5

npm i vconsole
1

npm下载完成截图如下：

下载完成之后在main.js引入控制台

import vconsole from 'vconsole' // 引入vconsole
// 判断是不是线上环境，不是的话就显示控制台
if (process.env.VUE_APP_ENV != 'production') {
  Vue.prototype.$vconsole = new vconsole() // 使用vconsole
}
1
2
3
4
5

uni-app官网中特别注明要在脚手架项目中使用scss需要npm下载

对于sass的版本，我用的是如下版本：

npm install sass-loader@7.0.3 --save-dev
npm install node-sass@4.14.1
1
2

通过npm run dev:mp-weixin运行到小程序，此时小程序会报错，报错截图如下：
报错原因：由于vconsole是用于H5的，不适用于小程序，此时加上uni-app强大的条件编译，便可以解决以上的错误，代码如下（main.js）：

 //#ifdef H5
import vconsole from 'vconsole' // 引入vconsole
if (process.env.VUE_APP_ENV != 'production') {
  Vue.prototype.$vconsole = new vconsole() // 使用vconsole
}
//#endif
1
2
3
4
5
6