03 手动创建vue项目完成加法运算

2024-04-08 14:15:10

在安装了相关工具之后，我们现在就可以创建一个分模块的vue项目了。

1、前提约束

完成nodejs，vue-cli，webpack，webpack-dev-server的安装
https://www.jianshu.com/p/eb4d9e132f62

2、操作步骤

打开命令行，执行以下命令，创建项目

# 进入到桌面
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

新建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: {}
    };

新建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;
    };

新建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>

继续在命令行中执行以下命令：

npm run dev

项目启动，页面自动打开，可以完成加法测试。

码农公寓

1、前提约束

2、操作步骤

相关文章