从0开始，查看了好多文档级初级教程。

安装环境

sudo pacman -S npm
npm install --registry=https://registry.npm.taobao.org -g  vue  vue-cli
# 前段打包工具
npm i -g webpack webpack-cli

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

vue-cli

vue-cli就是一个脚手架，步骤很简单，输入几个命令之后就会生成整个项目，里面包括了webpack、ESLint、babel很多配置等等

vue-cli创建项目

vue --help
# 下面命令中就有如何创建一个项目
vue-init --help
# 执行创建命令后等待就可以了
vue init webpack vue_1

项目参数

2019-04-23 10-01-02 的屏幕截图.png

这里有几个需要说明一下，没说明的直接回车选择默认就好，对项目没多大影响，很傻瓜式：

• “Project name”：**这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车

• “Install vue-router”:**是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件

• “Use ESLint to lint your code”:**是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成相关的ESLint配置

• “Setup unit tests with Karma + Moch?”:** 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是”N”，而不是直接回车哦

• “Setup e2e tests with Nightwatch”：**是否安装e2e测试，这里我也同样选择的是“N”

这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes，要么下一步要下很多没有用的loader

项目目录：

1. build 文件夹：

build.js           
logo.png  
vue-loader.conf.js    
webpack.dev.conf.js
check-versions.js  
utils.js  
webpack.base.conf.js  
webpack.prod.conf.js

如上，这个文件夹主要是进行webpack的一些配置，就我个人觉得啊~对我们最有用并且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件，分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容，一些简单的配置都已经有了，包括入口文件、插件、loader、热更新等都已经配置好了。我们要做的只是根据自己的项目有什么loader需要增加的，比如生成环境需要加上UglifyJsPlugin插件等可以自行配置，或者一些插件增加或者不需要的删除，其实都是和业务相关了，其他的都可以不需要动。

2. config 文件夹：

4月 23 09:59 dev.env.js
4月 23 09:59 index.js
4月 23 09:59 prod.env.js
4月 23 09:59 test.env.js

这几个配置文件我觉得最主要的就是index.js 这个文件进行配置代理服务器，这个地方和我们息息相关，和后台联调就是在这里设置一个地址就可以了。打开index.js 找到“proxyTable“这个属性，然后在里面加上对应的后台地址即可 ,构建生成环境也在这里配置，例如：

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

3. src文件夹：

4月 23 09:59 assets
4月 23 09:59 components
4月 23 09:59 router
4月 23 09:59 App.vue
4月 23 09:59 main.js

这个文件夹是整个项目最主要以及使用频率最高的文件夹。

• “assets”: 共用的样式、图片

• “components”: 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件

• “router”: 设置路由

• “App.vue”: vue文件入口界面

• “main.js：对应App.vue 创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

4.static 文件夹：

存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用

5.package.json:

这个文件有两部分是有用的：scripts 里面设置命令，例如设置了dev用于调试则我们开发时输入的是
npm run dev ；例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

下载依赖包

npm install --registry=https://registry.npm.taobao.org 

运行 npm run dev

当所有依赖包都下载好之后，输入命令：npm run dev 运行就可以看到一个自带的默认页面打开。此时项目就已经全部搭建好并且运行了~炒鸡简单吧，总结下来其实只有四步

• npm install --global vue-cli 下载vue-cli脚手架
• vue init webpack vue_1 生成项目，形成基本结构
• npm install # 依赖包
• npm run dev 运行

打包 npm run build

第一个demo

Webpack 入门教程

分类 编程技术

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

来自runoob

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

接下来我们简单为大家介绍 Webpack 的安装与使用。

创建项目

接下来我们创建一个目录 app：

mkdir app

在 app 目录下添加 maxzhao1.js 文件，代码如下：

app/maxzhao1.js 文件

document.write("It works.");

在 app 目录下添加 index.html 文件，代码如下：

app/index.html 文件

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="maxzhao_bundle.js" charset="utf-8"></script>
    </body>
</html>

接下来我们使用 webpack 命令来打包：

webpack-cli  maxzhao1.js -o  maxzhao_bundle.js

执行以上命令会编译maxzhao1.js 文件并生成maxzhao_bundle.js 文件，成功后输出信息如下所示：

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./maxzhao1.js 29 bytes {0} [built]

在浏览器中打开index.html，输出结果如下：

img

创建第二个 JS 文件

接下来我们创建另外一个 js 文件maxzhao2.js，代码如下所示：

app/maxzhao2.js 文件

module.exports = "It works from maxzhao2.js.";

更新 maxzhao1.js 文件，代码如下：

document.write(require("./maxzhao2.js"));

接下来我们使用 webpack 命令来打包：

webpack maxzhao1.js -o maxzhao_bundle.js 

Entrypoint main = maxzhao_bundle.js
[0] ./maxzhao1.js 42 bytes {0} [built]
[1] ./maxzhao2.js 46 bytes {0} [built]

在浏览器访问index.html，输出结果如下所示：

2019-04-24 11-24-35 的屏幕截图.png

接下来大家可以移步RUNOOB

Loader：加载其它文件

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

安装css-loader和style-loader

接下来我们使用以下命令来安装css-loader和style-loader(全局安装需要参数 -g)。

npm i css-loader style-loader
ls
# 多了一个文件夹 node_module 和文件 pack-lock.json
# ` node_modules `目录，它就是 css-loader 和 style-loader 的安装目录。

使用

接下来创建一个 style.css 文件，代码如下：

body {     background: yellow; }

修改 maxzhao1.js 文件，代码如下：

require("!style-loader!css-loader!./style.css");
document.write(require("./maxzhao2.js"));

编译：webpack maxzhao1.js -o maxzhao_bundle.js

2019-04-24 11-40-03 的屏幕截图.png

require CSS文件的时候都要写 loader前缀!style-loader!css-loader!，当然我们可以根据模块类型（扩展名）来自动绑定需要的loader。 将maxzhao1.js 中的 require("!style-loader!css-loader!./style.css") 修改为require("./style.css") ：

require("./style.css"); document.write(require("./maxzhao2.js"));

然后执行：

webpack maxzhao1.js maxzhao_bundle.js --module-bind 'css=style-loader!css-loader'

配置文件：配置编辑选项

我们可以将一些编译选项放在配置文件中，以便于统一管理：

创建 webpack.config.js 文件，代码如下所示：

module.exports = {
    entry: "./maxzhao1.js",
    output: {
        path: __dirname,
        filename: "maxzhao_bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

接下来我们只需要执行webpack命令即可生成maxzhao_bundle.js文件：

webpack   Hash: 4fdefac099a5f36ff74b Version: webpack 1.12.13 Time: 576ms     Asset     Size  Chunks             Chunk Names bundle.js  11.8 kB       0  [emitted]  main    [0] ./runoob1.js 65 bytes {0} [built]    [5] ./runoob2.js 46 bytes {0} [built]     + 4 hidden modules

webpack 命令执行后，会默认载入当前目录的webpack.config.js文件。

其它

vue-router懒加载

单页面应用，如果没有应用懒加载，第一次进入时，需要加载的内容过多，会出现长时间的白屏，不利于用户体验，运用懒加载则可以将页面进行划分，需要的时候加载相对应的页面，可以有效减少第一次加载的压力和用时。

router文件夹下的index.js原路由加载

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

修改为懒加载

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['@/components/HelloWorld'], resolve)
    }
  ]
})

配置sass及屏幕适配

配置sass

1.安装sass-loader及node-sass

npm install sass-loader node-sass --save-dev

2.使用
在.vue文件中的style中添加 lang='scss'，例如

<style scoped lang='scss'>
    $t-base:#32ba90;
    .wrap{
        color: $t-base;
    }
</style>

移动端---屏幕适配

1.在src文件夹中新建一个文件夹styles，并新建两个scss文件 --- mixin.scss / reset.scss
mixin.scss

$SCALE: 10;
$BASE: 375 / $SCALE;//375为设计图尺寸

// 超过显示省略号
@mixin ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
//多行文本，超过显示省略号
@mixin moreLine($num){
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: $num; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/
}

@function rem ($px) {
  @return ($px / $BASE) + rem
}

reset.scss

@import './mixin.scss';

$size_small:rem(12);
$size_middle:rem(14);
$size_default:rem(16);
$size_big:rem(18);
$text_color: #666;
$bg_color: #32ba90;
$border_color: #dedede;

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, em,textarea, button, input, select, figure, figcaption {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    border: none;
    font-weight: normal;
    font-family: PingFangSC-Light,helvetica,'Heiti SC';
    box-sizing: border-box;
    font-size: 14px;
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing: antialiased;
    &:hover{
        outline: none;
    }
}
a, a:visited {
    text-decoration: none;
    color: #333;
}
input:focus {
    outline: none;
    border: none;
}
html, body {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  background: #fff;
  color: #333;  
  padding: 0;
  margin: 0;
}
// 禁止用户选中
body{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
::-webkit-scrollbar {
    display: none;
}

.fl{
    float: left;
}
.fr{
    float: right;
}
.clearfix:after{  /*最简方式*/
    content: '';
    display: block;
    clear: both;
}
.clearfix{ /*兼容 IE*/
    zoom: 1;
}

2.在App.vue文件中设置html的font-size

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
  name: 'App',
  mounted () {
      // 设置html的font-size
      document.addEventListener('DOMContentLoaded', function () {
        const html = document.querySelector('html');
        html.style.fontSize = window.innerWidth / 10 + 'px';
      });
    }
}
</script>

3.mixin.scss则需要在所需的.vue文件中的style中引入，例如components中的HelloWorld.vue

<style scoped lang='scss'>
 @import '../styles/reset.scss';
  /*可使用mixin和reset中的变量及方法*/
</style>

数据请求axios

1.安装axios

npm install axios --save

2.在src文件夹中新建api文件夹，并新建index.js文件

import axios from 'axios';
var qs = require('qs');


if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL =  ''; //''里面填写请求域名
}

import VueRouter from 'vue-router';


//get请求方式
export const home = () => {
  return axios.get('/api/index');
}
//post请求方式(包含参数)
export const article = (id)=>{
    const params = qs.stringify({'id':id});
    return axios.post('/api/article', params);
}

3.调用接口

<script>
    import {home} from '@/api';//引入
    
    export default {
      data () {
        return {
        }
    },
   mounted () {
      const self = this;
      home().then(r => {//调用接口
        let res = r.data;
        console.log(res)
      });
    },
}
</script>

Toast提示

[图片上传失败...(image-ab3c39-1556106279855)]

1.创建一个普通的Toast提示组件

src/components/toast/index.vue

<template>
    <div v-if="showToast" class="toast" >
      <p>{{ toastTitle }}</p>
    </div>
</template>

<script>
export default {
  data: () => ({
    showToast: false,
    toastTitle: '',
  }),
  
  methods: {
    show (params) {
        this.toastTitle = params;
        this.showToast = true
    },

  },
  watch: {
    toastTitle: function(val) {
        if (val) {
          this.showToast = true;
          setTimeout(() => {
            this.showToast = false;
            this.toastTitle='';
          }, 2000)
        }
        return val;
      }
  }
}
</script>

<style scoped lang='scss'>
@import '../../styles/mixin.scss';
    
.toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(49, 49, 49, 0.8);
  color: #fff;
  border-radius: rem(5);
  z-index: 999;
  text-align: center;
  font-size: rem(14);
  p{
    margin: 0;
    padding: rem(4) rem(10);
    
  }
}
</style>

2.将组件注册成为plugin

src/components/toast/plugin.js

import Toast from './index'

export default {
  install (Vue, options = {}) {
    const VueToast = Vue.extend(Toast)
    let toast = null

    function $toast (params) {
      return new Promise(resolve => {
        if (!toast) {
          toast = new VueToast()
          toast.$mount()
          document.querySelector(options.container || 'body').appendChild(toast.$el)
        }
        toast.show(params)
        resolve()
      })
    }

    Vue.prototype.$toast = $toast
  }
}

3.在main.js中载入

//toast
import toast from './components/toast/plugin'
Vue.use(toast)

4.在页面中使用

<template>
  <div class="wrap">
    <button class="btn" @click="showToast">show toast</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  methods: {
    showToast () {
     this.$toast('toast')
    }
  }
}
</script>

第一个项目

前言

我这里安装好之后直接就带router了，对与我这个没入门的人来说有点难度，但我就喜欢迎难而上！

下面所有的介绍都会包含路由了，刚刚开始的时候，会避开路由。

插曲：我的系统是Manjaro 所以我安装了atom，挺方便快捷的；

创建

vue-init webpack vue_maxzhao
# 一路回车就可以了
cd vue_maxzhao
npm i

查看基础帮助

cat README.md

启动

npm run dev

打开http://localhost:8080文件就会出现默认效果。

测试基础模块语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

略……

本文地址：Vue我的首次遇见