vue项目

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;

一般我们只需要日期格式化即可： moment(要格式化的内容).format("YYYY-MM-DD HH:mm:ss")

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