Vue2、webpack、express4新建vue项目

最新推荐文章于 2024-03-01 16:54:22 发布

Williamoses

最新推荐文章于 2024-03-01 16:54:22 发布

阅读量298

点赞数

分类专栏： WEB 文章标签： vue2 webpack express

本文链接：https://blog.csdn.net/moses_binson/article/details/83149644

版权

WEB 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.环境：

Vue项目通常是由webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。

2.新建项目：

（1）通过应用生成器工具 express-generator 快速创建一个应用的骨架。

安装express-generator ：Windows键+r输入cmd运行npm install express-generator -g

我用如下命令创建了一个名称为William的 Express 应用。

如图所示我在C:Users\thIinkpad目录下就生成了项目的骨架。

（2）在根目录下新建index.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

（3）在根目录下新建src文件夹，然后创建app.vue和main.js。

app.vue代码：

<template>
    <div>山下兰芽短浸溪，松间沙路净无泥。</div>
</template>
<script>
    export default {
        name: "app"
    }
</script>
<style scoped>
    div{
        margin: auto;
        text-align: center;
    }
</style>

main.js代码：

import Vue from "vue";
import App from "./app";
new Vue({
    el:'#app', 
    render:h=> h(App)
});

提示：因为我用的是WebStorm,所以要将JavaScript language version设置成ECMAScript6,不然会报错误提示。

（4）将package.json文件替换，代码如下：

{  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {    "start": "node ./bin/www"  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-runtime": "^5.8.38",
    "babel-preset-stage-2": "^6.18.0",
    "html-webpack-plugin": "^2.24.1",
    "vue-html-loader": "^1.2.3",
    "css-loader": "^0.26.1",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.6",
    "webpack": "^1.14.0",
    "webpack-dev-middleware": "^1.6.1"
  },
  "dependencies": {
    "express": "^4.14.0",
    "vue": "^2.1.6",
    "vue-router": "^2.1.1"
  }
}

注：依赖的具体作用参见 https://babeljs.io/en/setup/#webpack

（5）在根目录下新建build文件夹，在文件夹内创建webpack.base.conf.js文件，代码如下：

// nodejs 中的path模块
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var  webpackConf = {
    // 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件
    entry: {  index: [   path.resolve(__dirname, '../src/main.js')  ] },
    // 输出配置
    output: {  // 输出路径是 myProject/output/static
        path: path.resolve(__dirname, '../output'),//用来存放打包后文件的输出目录
        publicPath:'/',  filename: '[name].[hash].js'//指定资源文件引用的目录
    },
    resolve: {
        extensions: ['', '.js', '.vue'],
        alias: {   'vue': 'vue/dist/vue.js'  } // 设置别名vue1不需要设置，vue2必须设置 否则会报错
    },
    module: {
        loaders: [
            // 使用vue-loader 加载 .vue 结尾的文件
            {    test: /\.vue$/,    loader: 'vue'   },
            {    test: /\.js$/,    loader: 'babel',    exclude: /node_modules/   }  ]
    },
    vue: {  loaders: {   js: 'babel'  } },
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, '../index.html'),
            inject: true
        }) ]
};
module.exports  = webpackConf;

（6）在根目录下新建.babelrc文件，代码如下：

{  "presets": ["es2015","stage-2"],  "plugins": ["transform-runtime"],  "comments": false}

未完待续！

Williamoses

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2、webpack、express4新建vue项目

1.环境：Vue项目通常是由webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。2.新建项目：（1）通过应用生成器工具 express-generator 快速创建一个应用的骨架。安装express-generator ：Windows键+r输入cmd运行npm install express-generator -g ...
复制链接

扫一扫

专栏目录