scss

效果图 src/app.vue <template> <div id="app" class="g-container"> <div class="g-header-container"> 头部导航 </div> <div class="g-view-container"> <div class="content"> 内容区域 </div> </div> <div class="g-footer-container"> <tabbar /> </div> </div> </template> <script> import Tabbar from 'components/tabbar'; export default { name: 'App', components:{ Tabbar } } </script> <style scoped> .g-container{ position: relative; width:100%; height:100%; max-width:640px; min-width:320px; margin:0 auto; overflow:hidden; } .g-header-container{ position:absolute; left:0; top:0; width:100%; z-index:999; height:64px;

接上篇 https://www.cnblogs.com/chenyingying0/p/12635369.html 返回顶部组件 base/backtop/index.vue <template> <transition name="mine-backtop"> <a href="javascript:;" class="mine-backtop" v-show="visible" @click="backToTop"> <i class="iconfont icon-backtop"></i> </a> </transition> </template> <script> export default { name:"MeBacktop", props:{ visible:{ type:Boolean, default:false } }, methods:{ backToTop(){ this.$emit("backtop");//基础组件，与业务无关，具体实现去页面里 } } } </script> <style lang="scss" scoped> @import '~assets/scss/mixins'; .mine-backtop{ overflow:hidden; @include flex-center(); width:45px; height:45px;

接上篇 https://www.cnblogs.com/chenyingying0/p/12612393.html Loading组件 在api--home.js中，添加代码，使ajax获取到轮播图数据后，延迟一秒再显示 import axios from 'axios'; import {SUCC_CODE,TIMEOUT} from './config'; //获取幻灯片数据 ajax export const getHomeSliders=()=>{ // es6使用promise代替回调 // axios返回的就是一个promise // return axios.get('http://www.imooc.com/api/home/slider').then(res=>{ // console.log(res); // if(res.data.code===SUCC_CODE){ // return res.data.slider; // } // throw new Error('没有成功获取到数据'); // }).catch(err=>{ // console.log(err); // //错误处理 // return [{ // linkUrl:'www.baidu.com', // picUrl:require('assets/img/404.png') //

首先保证这些条件满足： 然后全局安装vue cnpm install -g vue-cli 安装完成后可以使用vue -h查看vue的帮助文档 vue -list 查看vue支持的模板 我们接下来会用到的是webpack vue init webpack mall 项目名输入必须是英文，我这里输入mall 为什么不选择npm install呢，因为我们选择的是cnpm install 接下来就根据上面黄色字体的提示来操作 cd mall cnpm install 安装完成后打开项目，找到根目录下的 .eslintric.js文件 可以配置自己的代码风格，然后通过命令行自动来修改 cnpm run lint -- --fix 修正 修改webpack配置 config目录下的index.js cnpm run dev 再开一个cmd，使用ipconfig查看自己的ip地址 在浏览器访问：192.168.56.1:8080 文件和目录结构 在src--assets目录下，新建fonts/img/js/scss四个目录 这边存放的是公共的文件，如果是组件特有的文件，会跟自己的组件放在一起 在src目录下，创建四个目录： pages （页面组件） base （公共组件，可以移植到其他项目中） api （使用ajax或者jsonp与后端交互相关的） 公共资源的准备： 图标字体

2019/04/28 1.本质上，webpack基于node node跟webpack为最新稳定版，才能更好，更快的打包 安装 　　1.卸载node 直接在控制面板 卸载 　　2.安装 从官网下载 然后自定义安装在非C盘中 需要配置环境变量 （高级系统配置 -》环境变量 ） 　　 　　然后保存 就可以 全局 node -v 查看版本了 　　(创建一个文件夹 并 遵循 node规范) 　　 　　安装 webpack npm install webpack webpack-cli -g （全局安装 不推荐 要是安装不成功 手机分享一个wifi） 　　查看版本号 webpack -v 　　全局安装的缺陷 两个项目用的不同webpack 　　 推荐局部安装 ！ 　　　　1.卸载全局安装的webpack （npm uninstall webpack webpack-cli -g） 　　　　2.当前文件夹下安装 （npm install webpack webpack-cli -D 等价于 npm install webpack webpack-cli --save-dev ） 　　　　3.局部查看webpack版本 npx webpack -v（它会在当前目录moudel下面找webpack） 　　　　4.npm info webpack 查看webpack版本信息

Vue-Cli 3 引入 SCSS 全局变量 首先创建一个全局变量文件 global.scss $theme-color: #efefef; 编辑 vue.config.js module.exports = { // ... css: { loaderOptions: { sass: { // 根据自己样式文件的位置调整 data: `@import "@/styles/global.scss";` } } } }; 现在就可以在任意地方使用 global.scss 中定义的变量了 <template> <div class="box"></div> </template> <script> export default { data() { return {}; } }; </script> <style lang="scss"> .box { background-color: $theme-color; } </style> 新版sass-loader坑 // 旧 data: `@import "~@/assets/scss/variables.scss";` // 新 prependData: `@import "~@/assets/scss/variables.scss";` 来源： https://www.cnblogs.com/zwn-lucky7/p

简单易用 高效构建 高质量的生态圈 可能很多人会说现在提gulp也太落后了吧，但我想说写点东西并不是为了讨论它是否过时，而是来帮助我们自己来记忆、整理和学习。任何工具，我需要，我才去使用它，正如此时我需要gulp一样。 为了效率而使用工具 安装 全局安装 gulp命令： $ npm install --global gulp-cli 作为项目的开发依赖（devDependencie）安装： $ npm install --save-dev gulp 创建配置文件 在项目根目录下创建一个名为 gulpfile.js 的文件: touch gulpfile.js API gulp.src(globs[, options]) 读取目标源文件 gulp.dest(path[, options]) 向目标路径输出结果 gulp.pipe() 将目标文件通过插件处理 gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb]) 监视文件系统，并且可以在文件发生改动时候做一些事情 gulp.task(name[, deps], fn): 任务 定义一个gulp任务 使用 当配置完gulp.file后运行 gulp： $ gulp 常用工具插件 gulp-sass sass/scss编译 gulp-eslint js代码校对

css: { loaderOptions: { // 设置 scss 公用变量文件 sass: { data: `@import '~@/assets/style/public.scss';` } } } 来源： CSDN 作者： 爱忽悠的唐唐 链接： https://blog.csdn.net/weixin_37221852/article/details/104769907

[2018-07-31更新]： vue-cli 3.0正式版的中文文档已经出来了，详细的可以参考： https://cli.vuejs.org/zh/guide/ 一、安装Vue和创建项目: # 安装 npm install -g @vue/cli注：快捷键win+R，输入cmd并运行，默认C盘，可设置对应的磁盘，如F盘， 输入cd\到C盘更目录，再输入f:进入F盘，最后就是自己自定义的文件夹cd vue # 查看已安装版本 vue --version 或者 vue -V # 卸载 npm uninstall @vue/cli -g # 新建项目 vue create my-project注：创建自定义项目(my-porject)的时候，可自定义设置项目相关配置，可以End默认，如果设置了的可以在vue.config.js配置文件中再次修改。 # 项目启动 npm run serve # 打包 npm run build 二、Vue相关配置--vue.config.js Vue-cli3.0的配置不同于之前版本，大大的简化了开发者工作，更人性化，只有一个配置文件-vue.config.js。 常用配置：1、样式预处理less，sass，公共样式文件设置 　　　　　2、端口设置和热加载 　　　　　3、第三方插件 vue.config.js --- 基础模版 module

vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。vue-cli是vue官方提供的一个命令行工具，vue-cli主要是用于构建单页应用的脚手架。 使用方法： 1、安装vue-cli： npm install -g vue-cli 2、安装webpack-simple模板： vue init webpack-simple 项目名称 ，如: vue init webpack-simple demo 3、安装项目依赖： npm install 4、执行代码：执行 webpack 命令 ，在dist目录下生成build.js文件 ，执行 npm run dev 命令，自动启动web服务127.0.0.1:8080 本项目则是基于vue-cli生成的单页应用进行改造成多页面模板。 本项目用到了两个html模板页：index.html、users.html，因此，在webpack.config.js文件里entry节点则有两个入口文件/src/index.js、/src/user.js。 index.html模板，<router-view>把路由匹配到的组件渲染在这里 <body> <div id="app">　　　　　<!--