一步一步建立vue2.0项目（一）

2019年8月31日 182次阅读 来源: frontoldman

一步一步建立vue2.0项目

vue2.0已发正式版本了，来研究一下吧

新建一个文件夹 vue2.0-learn 。_条件是默许已装置了nodejs和npm_

  npm init

根据步骤初始化package.json，这个文件供应了这个项目须要的悉数信息，包含name，version，依靠包等等其他的信息。文件内容自身是一个JSON字符串，不仅仅是一个javascript对象。

然后我们得到了一个package.json文件

  npm install vue --save

由于vue的默许版本已是2.0+了，所以直接不加版本号装置，就已是2.0+了，假如须要装置其他版本号，能够加版本好装置，比方 npm install veu@1.0.0 --save ，–save的作用是装置以后自动加入到package.json的dependencies依靠列表内里

庞杂页面必定要模块化、组件话。如今最盛行的模块打包东西莫过于webpack，用过vue1.0和react之类的框架就很熟习了

  npm install webpack --save-dev

这里为何是–save-dev是由于这类脚手架类的装置包，不须要打包到框架中去，只要开辟者才会运用到。就不须要放到dependencies，而是放到devDependencies内里去

web开辟自然是须要一个web服务器容器的，我们能够运用种种服务器，这里我们运用webpack-dev-server，webpack自带的server，由于和webpack连系的更严密，也有许多更好用的功用

  npm install webpack-dev-server --save-dev

es6语法已很盛行了，运用es6语法，带来许多更好的开辟体验。webpack自带loader剖析器，能够根据须要设置loader插件，剖析es6语法，我们运用babel

  npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-2 --save-dev

装置完以后，在项目根目次下面新建一个.babelrc文件，这是babel的设置文件

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

下面最先营业代码的编写，新建一个index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

新建一个src文件夹，这内里安排的是源代码

新建一个App.vue文件，这个是项目根组件，运用的是vue单文件的构造体式格局，代码以下：

<template>
    <div id="app">
        哈哈上
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'app',
    data() {
      return {
        msg: '我是谁！'
      }
    },
    mounted() {

    },
    methods: {

    },
    components: {

    }
  }
</script>


<style lang="less" rel="stylesheet/less" scoped>
   
</style>

建立main.js，这个文件是项目初始化文件。代码以下：

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

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

下一步最先建立webpack文件。

平常我们的代码会辨别开辟环境和临盆环境，开辟环境不须要紧缩代码，须要能够调试。

而临盆环境则须要紧缩，去除调试代码等等其他一系列区分的事变。

所以我们先新建两个文件：dev.js和prod.js，先建立dev.js，这是开辟环境webpack设置

var path = require('path')

module.exports = {
  // 项目根目次
  context: path.join(__dirname, '../'),
  // 项目进口
  entry: [
    './src/main.js'
  ],
  // 打包编译天生文件设置
  output: {
    path: path.join(__dirname, '../build'),  // 编译文件存储目次
    filename: 'index.js',   // 编译后的进口文件
    publicPath: '/build/',   // devServer接见的途径前缀
    chunkFilename: '[name]-[chunkhash:8].js'  // 编译的分块代码能够运用文件hash作为文件名,按需加载的时刻会发生
  },
  resolve: {
    extensions: ['', '.js', '.vue'],   // 引入文件的默许扩展名
    alias: {
      vue: 'vue/dist/vue.js'    //别号设置 处理vue template 正告bug
    }
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: "style!css",
        include: __dirname
      },
      {
        test: /\.less$/,
        loader: "style!css!less",
        include: __dirname
      }
    ]
  }
}

好了，一个简朴的webpack config文件就建立好了，切换到项目根目次，运转 webpack --config ./webpack/dev.js ，能够看到在根目次下面天生一个build文件夹，下面有个index.js文件，这个就是天生的能够浏览器运转的文件

直接修正index.html文件，增加一行

  <body>
    <div id="app"></div>
    <script src="./build/index.js"></script>
  </body>

在浏览器内里翻开这个页面，OK，不出不测的是能够运转的。

但是web开辟我们并没有运用服务器，这会有许多限定，比方加载文件，ajax要求等等，所以我们运用了上文提到的webpack-dev-server。运用这个能够疾速启动一个当地server，和webpack配合起来另有许多其他功用，比方http代办，history api等功用

var webpackDevServer = require('webpack-dev-server');
var webpack = require("webpack");
var webpackConfig = require('../webpack/dev');
var config = require('../config')

var compiler = webpack(webpackConfig);

var server = new webpackDevServer(compiler, {
  stats: {
    colors: true  // 控制台输出带色彩
  },
  historyApiFallback: {
    index: '/index.html'  // history api 会定位到的页面
  },
  publicPath: webpackConfig.output.publicPath,  // 编译文件的前缀
  proxy: {    // http代办

  }
});

server.listen(config.port, err => {
  if (err) {
    console.log(err)
    return
  }
  console.log(`Listening at http://${config.address}:${config.port}\n`)
});

module.exports = server

这时刻直接浏览器接见http://localhost:9999，直接能够接见到我们方才看到的雷同的页面，而且默许最先了watch功用，修正以后直接编译了，不须要在从新运转webpack了

这时刻我们回过甚去看webpack的dev设置，彷佛太过于大略了

由于浏览器内里加载到的是编译以后的代码，所以这异常不利于我们打断点，不过幸亏，当代浏览器都支撑sourceMap功用，webpack设置起来也很简朴

  context: path.join(__dirname, '../'),
  devtool: 'source-map',

加上这一句话，再从新运转一下顺序我们就看到除了天生index.js文件以外，还天生了index.js.map文件，这内里就是源文件，我们能够在chrome的source下面的webpack文件夹下面看到对应我们誊写的源文件了，我们在这边打断点调试了

假如有浏览器自动革新就更好了，更新以下

var path = require('path')
var config = require('../config')
var webpack = require('webpack')
entry: [
    './src/main.js',
    `webpack-dev-server/client?http://${config.address}:${config.port}`,
    'webpack/hot/only-dev-server',
  ],
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

没有代码搜检，怎么做团队合作啊，我们运用比较火的eslint

新建一个文件.eslintrc

{
  "root": true,
  "parser": "babel-eslint",
  "env": {
    "browser": true
  },
  "parserOptions": {
    "sourceType": "module"
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  "extends": "standard",
  // required to lint *.vue files
  "plugins": [
    "html"
  ],
  // add your custom rules here
  "rules": {
    // allow paren-less arrow functions
    "arrow-parens": 0,
    // allow async-await
    "generator-star-spacing": 0,
    //
    "space-before-function-paren": ["error", { "anonymous": "always", "named": "never" }]
  }
}

修正webpack文件

    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        exclude: /node_modules|assets/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        exclude: /node_modules|assets/
      }
    ]

下面就要装置我们须要的依靠包了

  npm install babel-eslint eslint-plugin-html eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-friendly-formatter eslint-loader --save-dev

装置完成，测试能够了，已最先检测代码了，看起来惬意多了，顺便把代码格式化一下吧。

还记得我们在之前的index.html内里手动插进去了一行script引入了代码，这个脚本是我们经由过程webpack天生的，我们在webpack内里指定了称号，我们须要在html内里须要写一个如出一辙的称号，一样的代码我们保护了两遍，这是不能忍的

这里我们运用到一个插件HtmlWebpackPlugin，能够自动在script标签中插进去script

  npm install html-webpack-plugin --save-dev

事实胜于雄辩，以上的处理方案并不合适。由于webpackDevSever天生的文件是存储在内存内里的，运用historyApiFallback定位不到，所以照样在index.html内里保护这个script的援用吧

上文提到我们须要当地开辟和宣布到线上去，线上服务器环境肯定是不能运用webpack-dev-server的，我们是须要天生实在的文件存储到磁盘上，宣布到服务器环境上去，所以我们须要一份prod的webpack设置文件。

  npm install webpack-merge --save-dev

调解以后的webpackBase.js文件以下

var path = require('path')
var webpack = require('webpack')

module.exports = {
  // 项目根目次
  context: path.join(__dirname, '../'),
  // 项目进口
  entry: [
    './src/main.js'
  ],
  // 打包编译天生文件设置
  output: {
    path: path.join(__dirname, '../build'),  // 编译文件存储目次
    filename: 'index.js',   // 编译后的进口文件
    publicPath: '/build/',   // devServer接见的途径前缀
    chunkFilename: '[name]-[chunkhash:8].js'  // 编译的分块代码能够运用文件hash作为文件名,按需加载的时刻会发生
  },
  resolve: {
    extensions: ['', '.js', '.vue'],   // 引入文件的默许扩展名
    alias: {
      vue: 'vue/dist/vue.js'    // 处理vue template 正告bug
    }
  },
  module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        exclude: /node_modules|assets/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        exclude: /node_modules|assets/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: "style!css",
        include: __dirname
      },
      {
        test: /\.less$/,
        loader: "style!css!less",
        include: __dirname
      }
    ]
  },
  plugins: []
}

dev文件以下：

var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseConfig = require('./base')

module.exports = merge(baseConfig, {
  devtool: 'source-map',
  entry: [
    ...baseConfig.entry,
    `webpack-dev-server/client?http://${config.address}:${config.port}`,
    'webpack/hot/only-dev-server',
  ],
  plugins: [
    ...baseConfig.plugins
  ]
})

prod.js以下

var merge = require('webpack-merge')
var baseConfig = require('./base')
var fs = require('fs')
var HtmlWebpackPlugin = require('html-webpack-plugin')

var scriptReg = /<script.*src\="\.\/build\/index\.js">.*<\/script>/mgi
var template = fs.readFileSync('./index.dev.html', 'utf8')
if(!template){
  throw '猎取模版失利'
}
var templateContent = template.replace(scriptReg, '')

module.exports = merge(baseConfig, {
  plugins: [
    ...baseConfig.plugins,
    new HtmlWebpackPlugin({
      filename: '../../index.html',
      hash: true,
      templateContent: templateContent,
      minify: false,
      inject: true
    })
  ]
})

运转 webpack --config ./webpack/prod.js 会看到天生的文件，到时刻我们只须要把这些文件上传到服务器就OK了

增加npm script的，疾速运转

"scripts": {
    "dev": "node ./server/index.js",
    "prod": "webpack --config ./webpack/prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
}

至此，环境设置完毕

    原文作者：frontoldman
    原文地址: https://segmentfault.com/a/1190000009146931
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞