一、安装 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