一:初始化项目
- 创建项目
(1).创建项目。找到要创建项目的文件夹 输入CMD 进入小黑窗 输入“vue create 项目名” 创建我们这个项目
(2)进入版本选择 按上下键选 选择最后的自定义版本 按回车键
(3)按上下键进行切换 按空格键进行选择 选择上面四个 选择完毕之后按回车键(默认是有lint的 但是创建过程中 按了空格键 取消了对lint的选择)
(4)选择2.x版本的vue 按回车键
(5)这里是选择路由模式是history模式还是hash模式 我们选择hash模式 所以 输入“n” 代表no 然后按回车键
(6)选择css预处理器 我们选择的是less
(7)这里是问我们的这些配置的模块 是单独一个文件夹 还是放在package.json文件夹 我们选择第一个
(8)这里是问你这些 设置是否要保存下来 如果你选择了Y 那么会让你输入一个名字代表存储了这些设置 哪你下次创建项目就可以直接选择这个保存好了的设置
(9)项目创建中
(10) 成功的创建了项目 系统有两句提示 “cd + 项目名” 进入项目。“npm run serve”运行项目。 我们按照提示命令以此输入
(11)会给我们一个本地地址
(12)输入到浏览器打开
2. VueRouter(命令路由 router-view标签 路由规则 views文件夹 to属性)
(1)在VueRouter里 有两种文件引入的方式
第一种:(导入时)import 自定义页面名 from ‘页面路径’ (使用时)直接写这个自定义页面名
第二种:直接在使用这个页面时导入
(2)Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。
(3).router-link
请注意,我们没有使用常规的 a 标签,而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。
(4)router-view
router-view 将显示与 url 对应的组件。你可以把它放在任何地方,以适应你的布局。
3.清除默认全局样式
设置padding为0,margin为0
4.盒子模型(padding、margin)
padding 属性定义元素边框与元素内容之间的空白区域
margin属性是用与设置外