vue/cli4移动端ui组件库——Vant插件的安装(上)

使用Vant前的准备

推荐使用Vue官方提供的脚手架Vue/cli来创建项目

关于vue/cli

1.vue/cli的安装(已经安装可跳至2.项目创建)

1.1已经安装了vue/cli

  • 若已经安装了vue/cli的可以在电脑桌面按下Windows键+R快捷键在输入框中输入cmd来打开cmd命令,查看已经安装的vue版本号
  • 方法:在命令框中输入vue -V(-前加一个空格)之后按下Enter键
  • 显示:

C:\Users\Administrator>vue -V
@vue/cli 4.5.4

这里的版本号若已经是4的就可以跳过安装这一步了。若是4以前的版本,需要先卸载再安装。

  • 卸载方法:在cmd命令中输入:

npm uninstall vue-cli -g

1.2未安装vue/cli

  • 安装方法:按照上述方法打开cmd命令框,在命令框中输入以下命令:

cnpm install -g @vue/cli

这里-g表示全局安装。

  • 安装完成后,在cmd中键入下列命令查看版本号:

C:\Users\Administrator>vue -V
@vue/cli 4.5.4

若是4的版本,就可以了。

2. vue项目的创建

2.1项目创建前的准备

  • 安装是在C盘进行的,但因为是全局安装所以没有关系。此时我们要创建项目了,如果在原来的cmd命令框下创建项目会使得项目创建在C盘,所以可以先关掉cmd,在你想创建项目的盘里找或者创建一个文件夹。在该文件夹下我们来创建项目。
    注意:当我们创建项目或者平常,最好使用无中文无空格的路径。
    在你选择的盘下的文件夹创建好后,点击进入该文件夹,这是,文件里是空的,在上方的搜索栏中输入cmd命令,Enter键打开,这时可以看到cmd命令框中的路径是你所选择的盘下的,某某文件下的路径,在其中键入命令。

2.2创建项目

  • 在cmd命令框中创建一个项目:
  • 方法:

vue create vue454 (项目名称)

即,vue create +项目名称
(因为这个项目创建完是一个以你起的名字命名的文件夹,所以在以后创建项目时,都可以在我们前面创建的文件下,这样删除起来也方便)
按下Enter键后稍等下会出现以下界面:

Vue CLI v4.5.4
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features

这里让你选择用哪种方式,可以选择第一或第二的默认方式(如果选择默认,后续的路由什么的需要在项目中再下载安装),我比较习惯用第三种,自己选择配置方式。
(方向键的上下键来上下移动,Enter来确认)
第三种方法的基本配置如下:

Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Choose Vue version
( *) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( 选) Router
( 选) Vuex
(选) CSS Pre-processors
(选) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

选择用空格键,选中前方就会出现*号,选完按下Enter键。
继续后,选择

Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processor
s, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
选2.x
3.x (Preview)

继续后,选择

Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processor
s, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

继续后,选择

选 Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus

继续后选择

? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
选 ESLint + Prettier

继续后,选择

? Pick additional lint features: (Press to select, to toggle all, to invert selection)
选(*) Lint on save
( ) Lint and fix on commit

继续后,选择

? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
选 In package.json

继续后,选择

? Save this as a preset for future projects? (y/N) 直接按Enter键

之后会开始创建项目,会需要一些时间。

  • 创建完成后,可以在你创建的文件夹下看到一个新的项目文件夹。
  • 继续在cmd命令框中操作,输入:

vue ui

之后会在你的浏览器打开一个界面,在里面我们来添加Vant。

Vant插件的安装

方法一:vue ui界面安装

  • 命令行中输入vue ui,浏览器会打开一个界面:在这里插入图片描述
  • 注意查看这里是不是你创建的项目名字:
    在这里插入图片描述
    不是的话,就点击打开vue项目管理器,在里面找到导入,然后导入你自己的项目。
  • 左边有一个插件,点击它在这里插入图片描述
    在右侧主界面会出现这样的界面:在这里插入图片描述
    里面会有一些你创建项目时就已经自动下载安装的插件(这里我已经安装了vant了,所以它已经在我的插件里面了)
  • 点击右上角的添加插件,在搜索框中输入vant,第一个就是。在这里插入图片描述
  • 点击右侧的加号按钮选中该插件,右下角的安装按钮会变成绿色,点击安装
    在这里插入图片描述
  • 之后会出现如下界面,在第一个选项的下拉框中选择Import on Demand,然后点击右下角的完成安装

在这里插入图片描述
等待一会,vant插件就安装好啦。

方法二:cmd命令行安装

下一篇:vue/cli移动端ui组件库——Vant插件的安装(下)

猜你喜欢

转载自blog.csdn.net/nick_name1/article/details/108421973