网站建设的费用是不是含税的,哪个小说网站防盗做的好,昆明seo网站,江苏省城乡建设网站组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入#xff0c;并且设置meta 有时候呢#xff0c;为了让代码符合我们平时的编码习惯#xff0c;我们可以在ESLint进行设置#xff0c;如下#xff1a; 回到入口js文件…组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入并且设置meta 有时候呢为了让代码符合我们平时的编码习惯我们可以在ESLint进行设置如下 回到入口js文件main.js为了好看我们给它加上分号 不过这是就会报错了 所以要到eslintrc.js去设置上面对应可以去官网查看怎么配置使它接受这样的编码方式。   现在的App.vue如下 然后我们编写组件来替换那三个区块。 创建header组件 将header用到App.vue里面 Components后面要有空格。 这里还要安装一个stylus-loader依赖不然会报错。 这里提供一个依赖包的安装方法到package.json在里面添加所需要的最新版本的包然后再cnpm install 这样就可以添加到node_modules里面了运行cnpm run dev。 基本的组件结构就是这样 接下来再利用flex布局设置它的样式。 vue-router 因为在单页应用中内容区块有三部分所以这时候要用到路由vue-router http://router.vuejs.org/zh-cn/installation.html 同样通过package.json来安装。 vue-router的用法http://router.vuejs.org/zh-cn/essentials/getting-started.html vue-router1.x与vue-router2.0变化还是挺大的。 可以参考下面两个链接: 官网的写法http://router.vuejs.org/zh-cn/essentials/getting-started.html 参考https://segmentfault.com/q/1010000007929093/a-1020000007929260 如果使用模块化机制编程導入Vue和VueRouter要调用 Vue.use(VueRouter)。在通过use()这个方法相当于安装插件。 参照官网给的vue-router的过程 // 0. 如果使用模块化机制编程導入Vue和VueRouter要调用 Vue.use(VueRouter)// 1. 定义路由组件。 // 可以从其他文件 import 进来 const Foo { template: divfoo/div } const Bar { template: divbar/div }// 2. 定义路由 // 每个路由应该映射一个组件。 其中component 可以是 // 通过 Vue.extend() 创建的组件构造器 // 或者只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes [{ path: /foo, component: Foo },{ path: /bar, component: Bar } ]// 3. 创建 router 实例然后传 routes 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router new VueRouter({routes // 缩写相当于 routes: routes })// 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由 // 从而让整个应用都有路由功能 const app new Vue({router }).$mount(#app)// 现在应用已经启动了   App.vue的模板 main.js 当然这里还有用到很多组件goods、seller、rating所以还要创建。比如 ratings   最终完成的结果如下 这里还有一个问题就是在我们进入这个页面的时候页面是不会加载内容出来需要我们收订去点击goods、ratings、seller三块中的一块才可以。为了有内容这是我们就要用到导航了页面加载直接导航到goods的内容。所以要添加这一句 router.push(/goods); http://router.vuejs.org/zh-cn/essentials/navigation.html   注意这个router.push(/goods)要写在app之前的位置。 一些vue2.0的修改可以看这里https://segmentfault.com/a/1190000006623100 接下来就是写样式了。 还有一个样式就是高亮 当页面呈现出来后我们可以在查看元素里面可以看到当我们点击某一项时会自动添加一个router-link-active的class所以可以直接配置这个class的样式就可以出现点击后高亮了。 .router-link-activecolor: rgb(240, 20, 20) 1像素border实现 border-bottom: 1px solid rgba(7, 17, 27, 0.1) 直接在.tab加这句话可以实现但是在移动端看到的就不是这样的因为手机端有个dpr的概念http://mobile.51cto.com/web-484304.htm物理像素是设备像素的两倍。 https://segmentfault.com/a/1190000004538413 怎么做到1像素 因为比较通用所以定一个通用文件mixin.styl 然而这里并没有实现1像素需要对它进行缩放 添加一个类border-1px再建一个base.styl 要依赖所有的公共样式用一个index.styl 接着再main.js引入index.styl 还要在webpack做配置 这样我们就可以通过这种方式去引用commonimport common/stylus/index.styl; 重新运行出问题了 这是因为在之前图标字体的icon.styl中src依赖的是font下面的目录这个现在就不行了改成这样 总结一像素的实现伪类缩放用一个class 这样基本框架已经搭建好了接下来就来开发组件。  转载于:https://www.cnblogs.com/Chen-XiaoJun/p/6249338.html