目录索引
使用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插件就安装好啦。