VUE3.0+Vant VS Code入门教程

Vedu • 2020-12-12 14:56 • 技术资讯 • 阅读 3990

概述：随着技术的发展，前后端分离逐步形成趋势，本文作为Vue Vant及开发工具IDE Visual Studio Code实践入门的教程，能减少部分初涉人员的时间，能快速进入实践阶段。

一、安装node.js

1、下载node，网址：https://nodejs.org/en/download/，根据需要，选择平台，本文以Windows 10为例：

2、打开下载文件，node-v14.15.1-x64.msi

3、根据安装提示，一路next即可，安装完毕后，查看安装是否成功，点击搜索，输入cmd，如图：

4、选择命令提示符，分别输入node -v和npm -v，若出现版本号，则表示安装成功，如下图：

二、安装webpack相关命令

1、全局安装webpack：

npm install webpack -g

2、全局安装webpack-cli

npm install webpack-cli -g

3、使用查看webpack版本的命令

webpack -v

三、安装vue脚手架

1、全局安装vue-cli3.0对应的新命令

npm install -g @vue/cli；或者yarn global add @vue/cli

2、查看vue-cli3.0版本号：

vue --version(小写)，或者vue -V(大写)

3、创建vue项目：

vue create bj9420

4、选择Default(Vue 3 Preview) ([Vue 3] babel,eslint)，回车

5、进入项目目录下，cd bj9420

6、运行，执行命令yarn serve

7、打开浏览器，网址输入http://localhost:8080/

四、在Visual Studio Code中打开

1、File->Open Folder…

2、弹出选择文件夹窗口

3、点击选择文件夹

五、安装Vant

1、点击VS Code菜单Terminal，点击New Terminal

2、Vue 3 项目，npm安装 Vant 3.x 版本，在Terminal输入命令： npm i vant@next -S

3、或通yarn安装，命令：yarn add vant@next

六、引入Vant组件，自动按需引入组件 (官方推荐)

1、安装插件

npm i babel-plugin-import -D

2、插件完成安装

3、配置babel.config.js文件

// 在.babelrc 中添加配置 
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", { 
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ] 
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [ 
    [\'import\', {
      libraryName: \'vant\',
      libraryDirectory: \'es\',
      style: true 
    }, \'vant\'] 
  ]
};

4、在main.js文件中，Vant导入所需组件

5、在.vue页面中使用Vant组件

6、使用Vant按钮效果如图：

附：对于验证测试Vant的话，可以采用导入所有组件（Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法）。

1、注释babel.config.js中的配置

2、在main.js中，Vant导入所有组件

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/tech/17295.html