vue入门（一）：项目搭建

前言

个人JS水平比较通常，并且仍是跨专业半路出家，所以学习是惟一出路。vue并非我接触的第一个前端框架，以前学习过angular1.x，以为不太容易，结果没多久2版本就推出了，一看文档：totally rewrite。WTF？？？1还没学利索呢，2就重写了？今后抛弃angular。
直到后来，公司须要作个管理后台系统，通过一番比较最终选择了vue，缘由：

• angular已拉黑
• react里的jsx语法一时不容易掌握
• vue学习成本较低，简单易上手，性能也很优秀

二话不说立立刻手，我以前的项目都是经过vue-cli建立的，而其中的webpack配置并不特别贴合项目中的要求，因为我以前已经写了webpack系列的博文，因此在这里就从0-1搭建一个vue项目。

1. 开始

1.1 安装

npm install vue vue-router -S

在项目中咱们使用 .vue 文件进行开发，因此还要安装一些工具：

npm install vue-loader vue-style-loader vue-template-compiler -D

1.2 整理目录

打开咱们以前的webpack项目，删除 src 目录下的全部文件，并在其下建立 asset 文件夹，用来放置资源文件；pages 文件夹，来放置咱们的页面文件；router 文件夹，路由配置；http 文件夹，ajax请求配置；app.js 入口文件，还有一个 app.vue 文件，如图所示：

而后就能够写代码啦.........

2. 下面正式写代码

2.1 认识 .vue 文件

这个 .vue 文件是啥呢，官方文档大概是这么说的：

在不少 Vue 项目中，咱们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每一个页面内指定一个容器元素。
这种方式在不少中小规模的项目中运做的很好，在这些项目里 JavaScript 只被用来增强特定的视图。但当在更复杂的项目中，或者你的前端彻底由 JavaScript 驱动的时候，下面这些缺点将变得很是明显：

• 全局定义 (Global definitions) 强制要求每一个 component 中的命名不得重复

字符串模板 (String templates) 缺少语法高亮

• 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Babel

文件扩展名为 .vue 的 single-file components(单文件组件) 为以上全部问题提供了解决方法，而且还可使用 webpack等构建工具。

这是一个文件名为 Hello.vue 的简单实例：

编写 app.vue 文件：

<template>
  <div>
    <h1 class="red">{{text }} this is main</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      text: 'hello world'
    }
  },
  mounted () {
    console.log('app is mounted')
  }
}
</script>
<style>
  .red {
    color: red;
  }
</style>

编写入口文件 app.js：

import Vue from 'vue'
import App from './app.vue'

new Vue({
  el: '#app',
  render: function (h) {
    return h(App)
  }
})

2.2 配置webpack

在 config 目录下建立 vue-loader.config.js ：

// vue-loader.config.js 
module.exports = function (isDev) {
  return {
    preserveWhiteSpace: true,
    extractCss: !isDev,
    cssModules: {
      localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]',
      camelCase: true
    },
    hotReload: isDev //根据环境变量生成
  }
}

修改 webpack.config.js ：

// 引入vue-loader.config
const createVueLoaderOptions = require('./vue-loader.config')
// 引入VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 修改入口
entry: {
    app: path.join(__dirname, '../src/app.js')
  }

// 修改loaders配置
{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: createVueLoaderOptions(isDev)
      },
      {
        test: /\.css$/,
        use: [
          isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          'less-loader'
        ]
      }

// 添加VueLoaderPlugin
new VueLoaderPlugin(),
// 修改HtmlWebpackPlugin
new HtmlWebpackPlugin({
      template: path.join(__dirname, '../app.html'),
      inject: true,
      minify: {
        removeComments: true
      }
    })

至此，全部配置完毕，执行

npm run dev

若是配置没错，项目就成功跑起来了