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

在安装了相关工具之后,我们现在就可以创建一个分模块的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

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

上一篇:JAVA日期类


下一篇:虚拟机Ubuntu静态库和动态库的编程