安装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变量的值, 可以看到浏览器中背景色也随之自动改变了。
好了, 本次就讲到这里, 是不是可以动手了呢？
