vscode 老师推荐的安装插件

html,body{
  margin 0
  padding 0
  width 100%
  height 100%
}
  body{
    background-image :url("../images/bg.jpg");
    background-size: cover;
    background-position :center;
    font:14px;
    color: #4d4d4d;
    font-weight :300;
  }

index.js

import Vue from "vue"
import App from "./app.vue"
import './assets/styles/test.css'
import './assets/images/copyright.jpg'
import './assets/styles/style.styl'
const root=document.createElement('div')
document.body.appendChild(root)
new Vue({
    render:(h)=>h(App)
}).$mount(root)

app.vue

<template>
    <div id="test">{{text}}</div>
</template>
<script>
export default {
    data(){
        return {
            text:'abssssc'
        }
    }
    
}
</script>
<style>
    #test{
        color: rebeccapurple;
    }
</style>

package.json

{
  "name": "woxiangvue",
  "version": "1.0.0",
  "description": "我想我享项目后端",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  },
  "author": "乐值电子商务",
  "license": "ISC",
  "dependencies": {
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^1.0.1",
    "vue": "^2.5.16",
    "vue-loader": "^15.2.6",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.9.7"
  },
  "devDependencies": {
    "webpack-cli": "^3.1.0"
  }
}

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack=require("webpack")
const HTMLPlugin=require("html-webpack-plugin")

const isDev=process.env.NODE_ENV==="development"

const config={
    target:"web",
    entry:path.join(__dirname,'src/index'),
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    plugins: [
        // make sure to include the plugin for the magic
        new webpack.DefinePlugin({
                'process.env':{
                    NODE_ENV:isDev?'"development"':'"production"'
                }
        }),
        new VueLoaderPlugin(),
        new HTMLPlugin()
    ],
    module :{
        rules :[
            {
                test: /\.vue$/,
                loader: 'vue-loader'
              },
              {
                test: /\.css$/,
                use: ['style-loader','css-loader']
              },
              {
                  test:/\.(jpg|jpeg|svg|gif)$/,
                  use:[{
                    loader:"url-loader",
                    options:{
                        limit:1024,
                        name:'[name]-woxiang.[ext]'

                    }
                  }
                    
                  ]

              }
              ,{
                  test:/\.styl/,
                  use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                  ]
              }
        ]
    }
}

if (isDev){
    config.devtool="#cheap-module-eval-source-map"
  config.devServer={

      port: 8011,
      host: '127.0.0.1',
      overlay:{
          errors:true,
      },
      open: true,
      hot: true
  }
  config.plugins.push(
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NodeEnvironmentPlugin()
  )
}
module.exports=config

npm init 

初始化项目生成package.josn

npm i webpack vue vue-loader

安装webpack和vue  vue需要vue-loader进行运行，同时会生成node的一个依赖文件夹

根据提示安装 npm i css-loader vue-template-compiler

新建srcc文件夹，作为源码放置目录

创建好一个App.vue文件后

配置启动项创建webpack.config.js文件

前端的价值：

1. 搭建前端工程

2. 网络优化

3. API定制

4. nodejs层
   

babel-helper-vue-jsx-merge-props@2.0.3

babel-plugin-syntax-jsx@6.18.0

babel-preset-env@1.6.1

babel-plugin-transform-vue-jsx@3.5.0

1、npm i postcss-loader autoprefixer babel-loader babel-core babel-preset-env babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx

postcss-loader：后处理css的 ,autoprefixer 自动加浏览器前缀自动处理.

2、postcss.config.js配置脚本内容：

const autoprefixer = require('autoprefixer')

module.exports = {

    plugins:[

        autoprefixer()

    ]

}

3、.babelrc配置脚本内容：

{

    "presets"：[

        "env"

    ],

    "plugins":[

        "transform-vue-jsx"

    ]

}

4、webpack.config.js修改地方

{

    test:/\.jsx$/,

    loader： 'babel-loader'

}

{

test:/\.styl/,

use:[

    'style-loader',

    'css-loader',

    {

        loader: 'postcss-loader',

        options:{

            sourceMap: true,  //使用已有的sourceMap

        },

        'stylus-loader'  //自动生成sourceMap

    }

]

}

webpack-dev-server@2.10.0

stylus-loader@3.0.1 

 stylus@0.54.5

将项目的构建过程写在博客上了，中意的可以瞅瞅：

https://blog.csdn.net/weixin_41892205/article/details/80949601