Vue项目学习第一篇

最新推荐文章于 2024-04-09 12:34:50 发布

奈何桥边卖辣条

最新推荐文章于 2024-04-09 12:34:50 发布

阅读量2.8k

点赞数

分类专栏： vue 文章标签： webpack vue2.0

本文链接：https://blog.csdn.net/qq_30407307/article/details/79459255

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

不使用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
评论
Vue项目学习第一篇

不使用vue-cli构建简单的项目结构本篇文章作为vue项目学习的开始,主要是熟悉项目的编译工作流程,案例灰常简单! 1.首先建立如下图的简易目录结构: 2.cmd 进入项目目录,也就是vwpro目录执行: npm init (npm是神马??? 请百度…),因为只是测试,一路回车安装webpack: npm install –save-dev web...
复制链接

扫一扫