1.单文件组件
(1)问题：
使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: ‘#container ‘}) 在每个页面内指定一个容器元素。当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，这种做法的缺点很多：- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
- 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel。
- (2)单文件组件
文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。 - (3)解析打包.vue文件
vue为了能够使我们在项目开发中对组件进行更好的维护，提供了一个单文件组件系统，vue把每一个独立的组件放在一个.vue的文件中，在这个文件中提供基础三个自定义标签：
- template
- script
- style
来放置组件不同的内容块，但是因为浏览器不能够直接去识别该文件类型，所以我们需要通过webpack来进行编译打包，官方提供了一个对 .vue 文件进行处理的loader：vue-loader。
(4)注意:如果出现了如下的提示：
ERROR in ./src/Hello.vue
Module build failed: Error: Cannot find module ‘vue-template-compiler’
还需下载“vue-template-compiler”第三方模块并引入。<code> <template> <h1>{{message}}</h1> </template> <script> export default { name: 'hello', data() { return { message: 'Hello Miaov' } } } </script> <style></style> </code>
2.vue-cli
vue实际开发使用 .vue 的但组件系统来实现，但是不能适应实际复杂的需求，我们还需要配置很多的一些东西来和 .vue 进行融合，这个配置很繁琐，所以官方提供了一个工具，帮助我们来构建一个项目开发过程中必须使用的一些内容，这个工具：vue-cli，通过这个工具我们就可以很方便的来创建一个基于vue的项目，我们也把这个工具称为 脚手架。
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
安装
前提：先安装npm或yarn。
npm install vue-cli -g或yarn global add vue-cli命令。
vue-cli的构建
当我们通过上述方式安装好vue的脚手架以后，我们就可以在命令行中使用一个命令：vue（该命令是没有-cli的）
1.vue-cli创建步骤：
(1)vue init
- init：初始化（创建）基于vue的项目
- ：构建模板的名称：常用的是 webpack，其他的可以参考：https://github.com/vuejs-templates
- ：要构建的项目的名称
如：vue init webpack hello：基于webpack来构建一个名称为hello的vue项目（项目构建一定要联网！联网！联网！）
vue-cli是一个交互式命令行，通过vue命令构建项目会需要我们填写一些项目的信息：
- (2)Project Name：要创建的项目名称（该命令会生产一个package.json文件，文件中的name选项就是这个ProjectName，默认为当前创建的项目目录名称，也可以自行制定（但是需要符合package.json中name命名规则，不要出现大写字母，空格，下划线，可以使用 - ）
- (3)Project Description：项目简介，也会出现在package.json文件中,可选
- (4)Author：作者，可选
- (5)下一步直接回车
- (6)nstall vue-router：是否安装vue路由组件，做项目的话一定要安装;
- (7)Use ESLint to lint your code：是否需要使用ESLint模块进行代码检测。语法检测工具，一般正规的项目团队中需要安装，个人项目看自己的使用情况决定
- (8)Setup unit tests with Karma + Mocha?：是否安装测试（单元测试）
- (9)Setup e2e tests with Nightwatch?：是否安装端到端的测试
完成上面步骤，over！
- 下载依赖包：”npm install”
通过vue-cli完成配置以后，下一步需要安装vue所需要的依赖包，在该创建好的项目目录中，运行”npm install”命令。
项目需要安装的依赖包在vue-cli工具自动生成的package.json文件中有说明：
- dependencies：项目中实际需要使用到的依赖包
- devDependencies：项目开发过程中需要使用的一些工具包，不是项目实际线上代码的一部分。
- 2.运行
所需要的安装依赖包安装完成以后，就可以启动项目，运行
- yarn run dev / npm run dev：开启一个测试开发环境。会开启一个本地服务器，我们就可以通过该服务器环境去访问当前这个项目。
- yarn run build/npm run build：
构建项目，把项目进行编译、打包，生成的文件默认存放在dist目录下。我们可以把项目打包后的文件上传到服务器，就是我们在线上运行需要的代码。 - 界面：如果是首次运行，那么会看到一个欢迎页面，下面我们就可以进行项目开发。
3.生成的项目的目录结构
- (1) build目录：构建项目命令所需要使用到的工具相关的脚本文件和配置文件
- (2) config目录：在vue-cli中会自动安装一个小型的express搭建的热重载web服务器，config里面就是关于这个服务器的相关配置
- (3) dist目录：项目编译构建上线后的存放目录
- (4) node_modules目录：项目依赖包存放目录
(5) src 目录：项目源代码存放目录
main.js：vue脚手架为我们自动生成的项目中设置的入口文件，在该入口文件中，做了一些项目初始化的工作- 引入 Vue
- 引入必要的组件
创建Vue实例
<code> // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. // 导入 Vue 框架 import Vue from 'vue' // 导入 App 组件对象 import App from './App'; import router from './router/index'; // 设置项目开发提示 Vue.config.productionTip = false; // 创建Vue实例对象 new Vue({ el: '#app', // router: router, router, template: '<App/>', components: { App } }) </code>
- (6) static目录：配置静态资源（内置的web服务器对应）存放目录
在项目开发过程中，我们的大部分任务是在src这个目录下完成的。
2.路由
需求
当我们的应用变得复杂了以后，涉及到的页面也会变多，逻辑也会变复杂，原来我们是通过多页面的方式来组织和维护我们的网站，但是这样的用户体验不是太好（因为会刷新或跳转页面），为了解决用户体验问题，最好的方式，数据（页面会发生变化），但是不需要跳转、刷新。
- 通过ajax异步无刷新获取数据
- 获取到数据以后通过vue来处理和管理还有渲染页面。
什么情况下获取数据渲染页面？
传统的处理方式：通过url重新发送请求得到新的数据和页面，获取什么页面数据由url来决定，使用了单页面开发模式的话，就不能再使用页面跳转，但是可以使用url中的hash值的变化来决定获取什么内容渲染什么页面。
所以一个url的hash对应一个视图，那么我们就需要设置hash和视图的关系，我们可以把hash和view做一个对应关系（映射）
- 设置hash-view的map（映射）关系
- 监听hash变化
- 当hash值变化的时候，根据map找到对应的组件来渲染视图。
vue为我们提供了一个第三方的框架来实现上述的功能:vue-router
上面我们提到的 地址-视图 的映射：路由
vue-router
- 1.安装：
npm install vue-router / yarn add vue-router.
若在构建vue-cli的时候，在询问“nstall vue-router”（是否安装vue-router）时，选择“Y”,这里就不用重复安装vue-router。 2.配置路由步骤：
(1) 配置： “router/index.js”
- 导入 vue-router
- 把vue-router作为插件调用：Vue.use();
Vue.use( plugin )
参数：{Object | Function}
用法：
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。
也就是说，“plugin”必须提供一个install方法以供vue自动调用。
- new Router()得到一个路由对象，并把该对象添加到Vue实例的router属性中
new Router()需要传入一个配置对象，该对象中包含一个routes的属性，这个属性就保存了路由组件的映射关系
<code> import Vue from 'vue'; import VueRouter from 'vue-router'; import Register from '@/components/Register'; import Login from '@/components/Login'; // 注册vue-router组件到Vue实例中，才能在组件中使用 <router-view /> 组件</br> Vue.use(VueRouter); // 创建一个vuerouter实例对象，用来处理路由和组件的映射，该构造函数接受一个对象，其中routes export default new VueRouter({ routes: [ { //路由路径 path: '/register', //路由名称(非必须) name:"reg", //路由组件 component: Register }, { path: '/login', name:"login", component: Login } ] }); </code>
(2) “main.js”
- import router from ‘./router/index’;
在vue实例中添加“router: router”属性。
<code> import Vue from 'vue'; import App from './App'; import router from './router/index'; new Vue({ el: '#app', //router: router, router, template: '<App/>', components: { App } }) </code>
(3) “App.vue”
渲染和当前url中匹配的路由组件：“”。
vue-router会把和当前匹配路由组件拿取出来，替换这里的router-view。<code> <template> <div id="app"> <List :data="searchUsers" /> // router-view：用来放置和当前url地址匹配的组件内容 <router-view></router-view> </div> </template> <script></script> <!--scoped:设置该属性，那么style中的样式只对当前组件中的元素产生影响--> <style scoped> ul li { color: red; } </style> </code>
注意：
- (a).vue2.5版本支持大写的HTML标签，如上文代码“”;
vue2.0还是烤串写法； - (b).“App.vue”文件导入时，可以不写扩展名，是因为在“bulid/webpack.base.conf.js”文件中，已帮我们解析好;
(c).在 “router/index.js”中，“import Login from ‘@/components/Login’;”，
“@”指的是src目录，也是在在“bulid/webpack.base.conf.js”文件已帮我们定义好。
<code> resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, </code>- (a).vue2.5版本支持大写的HTML标签，如上文代码“”;
- (d).在上述代码中，”
<style scoped></style>“,
单文件组件让你可以在同一个文件里完全控制 CSS，将其作为组件代码的一部分。
这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件
内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。
这里的数字是随机生成的。
3688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
