VSCode中通过vue-cli完成uniapp+uView1.x从0-1的项目初始化搭建

uniapp+uView1.x-cli 项目初始化

1.安装指定版本的脚手架：@vue/cli 4.5.8

===========================
//node -v ==== v16.13.1
//npm -v  ==== 8.1.2
===========================
vue卸载：npm uninstall vue-cli -g（3.0以下版本卸载）
        npm uninstall -g @vue/cli（3.0以上版本卸载）
 npm install -g @vue/cli@4.5.8
vue -V
->@vue/cli 4.5.8

2.通过脚手架创建 uni-app 脚手架模版

vue create -p dcloudio/uni-preset-vue my-project
选择"默认模板"

3.进入创建好的项目，安装uView1.x版本

cd my-project
npm install uview-ui@1.x

4.安装对应的sass和相依的加载模块。

// 安装node-sass
npm i node-sass -D
​
// 安装sass-loader
npm i sass-loader -D

5.项目引入之-main.js

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

6.项目引入之-uni.scss

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

7.项目引入之-App.vue

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

8.项目引入之-pages.json

// pages.json
{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

9.测试是否安装成功。

//pages-index.vue
​
export default {
    data() {
        return {
            title: 'Hello'
        }
    },
    onLoad() {
        console.log(this.$u.config.v);
    },
    methods: {
​
    }
}
=====================================================
console.log(this.$u.config.v);
// 或者(二者等价)
console.log(this.$u.config.version);
======================================================

好了，至此你可以随意挥洒你的文采了。

gitHub在线地址