Vue脚手架的搭建和路由配置

用UI视图创建时，会自动进入一个网页，然后在里面进行操作和项目管理。

但是常用命令行创建.

 

 

程序员都用md文件写(readme.md)。

####环境

package.json里的scripts:里可以写一些自己要的命令行，最后npm  run  +自定义指令执行，

(package.json里不能有任何多余的字符等，也不能有注释，一般不要动，npm自动生成管理)

 

babel   是js编辑器,把es6及以上的代码转化为es5的代码.

babel.config.js就是babel的配置文件。

.gitignore就是忽略列表

所有的第三方依赖包都放在node——modules里

public是一个本地服务器

 

启动项目：

进入项目目录后，执行npm run serve，启动一个本地开发服务器。

Src就是写代码的地方，

里面的assets放静态资源.

components放可以被复用的组件。

 

APP.vue就是根容器(根组件)

 

main.js是整个应用程序的入口文件（第一行代码从这开始走）

 

Vue.config.productionTip = false;//在main.js里

关闭生产环境下的提示，对应的就是开发环境开启。

被注入的脚本文件会自动的添加在被挂载的地方

$mount('#app')挂载，不是本文件里默认的#app，是index.html里的#app.

 

webpack会实时的将main.js和index结合起来。

 

一个.vue的文件就是一个组件

 

eslint是一个代码检测工具，它的目标是把当前程序中不规范的代码找出来并报错，让你纠正.

<template></template>里不能有多个子节点

 

 

组件的引入：

 

 

 

css里的全局样式写在APP.vue里，

<style scoped>这里scoped表示这里的css只限于当前vue文件使用，对其他组件不影响

 

app.vue里不加scoped，其他所有组件都要加scoped

 

 

单文件组件：

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

• 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
• 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
• 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。

 

##路由：

单页面应用程序  VS  多页面应用程序

组件的创建与销毁，vue单页面是组件之间不断的创建与销毁

 

有了路由就能实现单文件应用，如何使用呢？

①:现在src文件夹里创建一个router.js文件

②:在main.js里导入路由

③:在根容器APP.vue里引入视图容器.

 

 

 

 

router-link是vue-router的内置组件，他可以触发URL的改变。在路由系统，URL变化，所匹配的组件也发生变化.

 

做一个选项卡切换的todolist：

<router-link to='./todo'></router-link>

(默认会在html界面渲染成一个a标签);

<router-view></router-view>

router-link有一个tag属性：(设置该标签在最终渲染出来时的承载标签，点击效果不会丢失，vue有内部api处理好点击效果)

<router-link to='./todo' tag='span'></router-link>

 

 

①:创建三个vue组件的页面。

②:在router.js(路由模块)里导入三个模块

③:在根组件(APP.vue)里添入视图容器

 

 

 

给router-link标签添加高亮样式

 

 

mode：用于指定路由模式，常用有两种，分别是hash和history.（带#号的是哈希路由）.