VSCode中通过vue

VSCode中通过vue

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在线地址

VSCode中通过vue

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在线地址