1. vue init webpack portfolio 安装模板
2.cd portfolio 进入项目
3.npm install 安装模块下代码的依赖
4.项目准备,新建resource文件夹,将图片放在其中
5.所有的代码文件都放在src文件夹中,src下一般有三个子目录,assets,components(在其中自建文件夹,存放组件,满足组件就近维护原则)和common(公共模块和资源,其中有3个子目录,js,scss,fonts)
6.为了使用sass,需要安装sass的依赖包
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
打开webpack.base.config.js在loaders里面加上
module: { //对模块的处理逻辑 对象 rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /.scss$/, //正则,匹配到的文件的后缀名 loaders: ['style-loader', 'css-loader', 'sass-loader'], //匹配处理到的文件 exclude: "/node_modules/" //排除的文件夹 }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } },在用scss的地方写上
<style lang="scss" type="text/css">
7.如果在运行npm run dev的时候出现下面的错误
错误表示找不上node-sass模块,我是因为cnpm安装导致的,换成npm安装就好,或者cnpm install node-sass@latest
8.如果发现body具有margin:8px,这是浏览器默认的样式,可以考虑引入reset.css或者normalize.css去除这个样式
在static文件夹新建一个css文件夹,里面包含reset.css或者normalize.css文件,在index.html文件中引入这个css文件
9.vue-awesome-swiper可以实现vue项目中的轮播图效果,是vueJS框架的插件
10.有经常用的变量而且不变的,要懂得封装成常量,不要很多地方都写同样的东西
11.在vue中,图片延迟加载可以使用vue-lazyload
12.实现监听页面的滚动事件 scroll事件 window.addEventListener('scroll',this.getTopBlock);
13.vue配置文件的梳理:https://segmentfault.com/a/1190000010659925
14.vue项目路径别名设置:http://www.cnblogs.com/xiaofenguo/p/7603086.html
15.sass的学习: http://sass-lang.com/guide
16.moment.js的学习,一款JavaScript日期处理类库:https://momentjs.com/
安装方式:npm install moment --save
使用:在main.js中添加这两行代码:
import moment from "moment";
Vue.prototype.$moment = moment;
17.div全屏背景图效果
div {
background-image: url(bg03.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: #fff;
}
18.webpack打包时出现 Error: ENOENT: no such file or directory, scandir
解决方案是:npm rebulid node-sass
19.vue-area-linkage省市区联动选择,基于 Element UI.
下载组件:
npm install --save vue-area-linkage
引入组件在 main.js:
import Vue from 'vue';
import VueAreaLinkage from 'vue-area-linkage';
Vue.use(VueAreaLinkage)
在组件中进行应用:
// basic
<area-select v-model="selected"></area-select>
<area-cascader v-model="selected2"></area-cascader>
//setting
<div class="areainp"><area-cascader type='text' :level='1' v-model="value1" placeholder="请选择地址"></area-cascader></div>
效果:
20.webpack 打包: https://segmentfault.com/a/1190000011275673