Vue项目学习第一篇

不使用vue-cli构建简单的项目结构

本篇文章作为vue项目学习的开始,主要是熟悉项目的编译工作流程,案例灰常简单!
1.首先建立如下图的简易目录结构:
这里写图片描述
2.cmd 进入项目目录,也就是vwpro目录
执行: npm init (npm是神马??? 请百度…),因为只是测试,一路回车
安装webpack: npm install –save-dev webpack
安装vue2.0: npm install –save vue
安装babel,编译es6: npm install –save-dev babel-core babel-loader babel-preset-env
解析vue组件和.vue的文件: npm install –save-dev vue-loader vue-template-compiler
解析css: npm install –save-dev css-loader file-loader

3.我们在webpack.congfig.js文件中配置项目
这里是我的配置:

var path = require('path');

module.exports = {
    entry:'./src/main.js',//入口文件
    //输出
    output:{
        path:path.resolve(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'index.js'
    },
    module:{
        rules:[
            //解析vue文件
            {test:/\.vue$/,loader:'vue-loader'},
            //用babel解析js文件 排除模块安装目录的文件
            {test: /\.js$/, loader: 'babel-loader',exclude: /node_modules/}
        ]
    }
}

习惯了npm XXX执行指令的方式,在我们的package.json中设置一下启动命令:

"scripts": {
    "dev": "webpack"
  }

4.编写几个简单页面
APP.vue:

<template>
    <div id="app">
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                msg:'Hello everyone!'
            }
        }
    }
</script>
<style scoped>
    *{
        color: green;
    }
</style>

main.js:

import Vue from 'vue';
import App from './APP.vue';

new Vue({
    el:'#app',
    render:h=>h(App)
});

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/index.js"></script>
</body>
</html>

5.执行:npm run dev
ok,这里报错了,没关系,根据报错去修复问题
我这里报错如下:
这里写图片描述

根据提示,执行指令: npm install webpack-cli -D (-D的意思是在package.json中把它保存为开发依赖;也可以使用–save-dev)
ok,再次执行 npm run dev
好了,我们可以看到生成了dist/index.js文件,在之前的index.html中我们已经引入了此文件.
那么我可以双击执行下index.html打开网页,如下:

这里写图片描述

好了,小伙伴们,行动起来吧

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值