VSCode中通过vue

编程入门 行业动态 更新时间:2024-10-27 04:38:06

<a href=https://www.elefans.com/category/jswz/34/1770826.html style=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

本文发布于:2024-02-11 19:23:38,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1682902.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:VSCode   vue

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!