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

2020-03-24 13:58:57 阅读：249 来源： 互联网

标签：03 vue 加法 js webpack cal var path

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

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

标签：03,vue,加法,js,webpack,cal,var,path
来源： https://www.cnblogs.com/alichengxuyuan/p/12558544.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

1、前提约束

2、操作步骤