Después de que las herramientas de instalación, ahora podemos crear un vue proyecto de la sub-módulo.
1, la premisa de la restricción
nodejs instalación completas, vue-cli, webpack, webpack-dev-servidor de
https://www.jianshu.com/p/eb4d9e132f62
2, Procedimiento
- Abra una línea de comandos, ejecute el siguiente comando para crear el proyecto
# 进入到桌面
cd C:\Users\zhangli\Desktop
# 创建一个文件夹作为项目名称
mkdir vue-calc
# 进入vue-calc
cd vue-calc
# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装webpack
cnpm install webpack
# 安装webpack-dev-server
cnpm install webpack-dev-server
# 项目初始化
cnpm init
# 创建src、dist文件夹
mkdir src
mkdir dist
- nuevos webpack.config.js
//导入path模块，解决路径问题
var path = require('path');
module.exports = {
//指定入口文件
entry: {
entry: './main.js'
},
//指定出口文件.打包生成build.js
output: {
path: path.resolve(__dirname,'dist'),
filename: 'build.js'
},
//模块,指定加载器,可配置各种加载器,这样就不担心less等文件的编译问题，这里用不到所以没写
module: {}
};
- nuevos main.js
//commonjs方式引入cal对象，由于node的模块作用域，所以必须要导入，之后才能使用这个对象
//var cal = require('./cal.js');
//ES6的模块方式引入
import cal from './cal.js';
//获取按钮
document.getElementById('btn').onclick = function(){
var n1 = document.getElementById('n1').value - 0;//转为数字
var n2 = document.getElementById('n2').value - 0;//转为数字
var sum = cal.add(n1,n2);
document.getElementById('result').value = sum;
};
- nuevos cal.js
var cal = {
add:function(n1,n2){
return n1 + n2;
}
};
//commonjs导出方式
//module.exports = cal;
//ES6导出方式
export default cal;
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="n1"> +
<input type="text" id="n2">
<button id="btn">=</button>
<input type="text" id="result">
<script src="../dist/build.js"></script>
</body>
</html>
- Continúe con los siguientes comandos en la línea de comandos:
npm run dev
El proyecto se inició, la página se abre automáticamente, la prueba se puede completar la adición.