Vue开发塔罗牌预测系统(1)：基本的开发环境

2018-07-28 本文已影响76人破旧的大卡车

安装vue

按照官方的的说法, 对新手(不熟悉node.js)的人不建议用CLI(脚手架)。故我采用手动安装：

mkdir tarot && cd tarot && npm init -y

如下的package.json实现了Vue以及使用webpack以及webpack-dev-server实现快速打包(css样式表/png等图片/vue文件等)与开发。

 {
  "name": "tarot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "jquery": "^3.3.1",
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "node-less": "^1.0.0",
    "vue-loader": "^15.2.6",
    "vue-style-loader": "^4.1.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --host 127.0.0.1 --port 8080",
    "build": "webpack"
  },
  "keywords": [
    "tarot"
  ],
  "author": "Van Abel",
  "license": "ISC"
}

我们需要npm i 来安装上述包。我们的webpack.config.js配置如下：

var path=require('path')
const webpack = require('webpack')
const htmlwebpackPlugin= require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports= {
  mode: "development",
  entry: path.join(__dirname, 'src/js/index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    host: 'localhost',
    port: 8080,
    hot: true,
    open: true,
    openPage: '',
    contentBase: path.join(__dirname, './'),
    watchOptions:{
      aggregateTimeout: 300,
      poll: 1000
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new htmlwebpackPlugin({
      template: path.join(__dirname, './index.html'),
      filename: 'index.html'
    })
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use:[
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /.(jpg|png|jpeg|svg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
}

以后我们可以用

npm run dev

来编译, 打开浏览器的https://localhost:8080来预览。

html文件

我们的主要文件index.html如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  </head>
  <body>
    <ul>
      <li>The first item</li>
      <li>The second item</li>
      <li>The third item</li>
      <li id="app">Vue message: {{ msg }} </li>
    </ul>
  </body>
</html>

这里, 关键是Vue的语法{{ msg }} 它将会被如下的index.js替换为具体的变量。

脚本文件

我们的脚本文件src/js/index.js如下:

import Vue from 'vue'
var vue=new Vue({
  el: '#app',
  data: {
    msg: 'Hello, world!'
  }
})

保持好后, 运行npm run dev, 打开浏览器http://localhost:8080即可预览效果, 可以看到{{msg}}被替换为Hello, world!.

测试原生javascript脚本

我们也可以直接使用原生的javascript/jquery语法, 例如：

// src/js/index.js
import Vue from 'vue'
import $ from 'jquery'

const $lis = $('ul').find('li')

$lis.filter(':odd').css('background-color', '#369')
$lis.filter(':even').css('background-color', 'skyblue')

var vue=new Vue({
  el: '#app',
  data: {
    msg: 'Hello, world!'
  }
})

这可以将每个列表项目的底色按照奇偶性改变。

使用less语法的样式表

我们还可以使用less语法的样式表, 在src/css目录下新建common.less如下：

@color: #fed;

body{
  background: @color
}

然后在index.js中引入：

import '../css/common.less'

尝试改变color变量的值, 可以看到浏览器中背景色也随之自动改变了。

好了, 本次就讲到这里, 是不是可以动手了呢？