Vue项目创建和首页

一、安装 nodejs 环境

你可以在 https://nodejs.org/ nodejs 官方网站下载安装包，然后进行安装。如果是 linux 或者 mac 命令行的用户，也可以使用命令行安装。

在安装好了 nodejs 之后，我们在终端中输入以下两个命令：

node - v

npm - v

首先，我们在终端中把当前目录定位到你准备存放项目的地方。如我是准备放在~/test/Works/这个目录下面，那么我的命令如下：

cd ~/test/Works

（也可以直接在目录内打开终端）进入到目录之后，我们按照下面的代码逐条输入，新建一个自己的vue项目,app01是自己起的项目名称

vue create app01
# 这里需要进行一些配置
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? 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) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, EsLintetc.? In dedicated config files
? Save this as a preset for future projects(Y/N) n

 Creating project in D: test\Woeks\app01.
Initializing git repository...
  Installing CLI plugins. This might take a while...
| [ ... ] |idealTree:project01: sill idealTree buildDeps

added 827 packages in 21s
? Invoking generators...
? Installing additional dependencies...

added 22 packages in 3s
 Running completion hooks...

? Generating README.md...
? Successfully created project app01.
? Get started with the following commands:

$ cd project01
$ npm run serve

D: Woeks test FinalProject> _

成功的创建了项目

“cd + 项目名” 进入项目

“npm run serve”运行项目

我们按照提示命令以此输入

注意：最好复制粘贴，以免输错

DONE  Compiled successfully in 8220ms

App running at:

- Local: http://localhost:8080/

- Network: http://192.168.31.47:8080/
Note that the development build is not optimizedTo create a production build, run npm run build.

成功启动项目后，会给我们一个本地地址

复制粘贴到浏览器打开就可以看到实际的效果了。

二、VueRouter
1、清除默认全局样式

写样式的时候 有些标签是有默认样式的 

例如：body标签 如默认上下左右的margin值各为8px 很不利于样式的书写

所以需要在全局样式中清除所有标签的默认样式

2、盒子模型（padding、margin）

padding：外边距，当前盒子和其他盒子的距离

margin：内边距，盒子内容和边距之间的距离

3、vant引入的三种方式

下载vant：npm i vant@latest-v2 -S

a. 一次性导入所有组件      使用组件时直接复制代码即可

注：全局导入的方式便捷简单 但是不利于项目性能优化 真实开发中并不推荐

b. 按需导入   就是用哪个组件就导入哪个组件 并且在导入和使用中间

注：还有一个注册的步骤 就很麻烦 但是占的项目内存比较小

c. 自动按需导入    下载需要的插件  推荐使用

4、vant组件导入方法
 Vant-UI组件库的使用_微微va