创建最基础的VUE单文件项目

标签：路由   map   product   entry   plugin   npm   des   文件   dirname   

创建文件

• App.vue

      <template>
    <div>
      第一个例子
      <div>
        <div>路由区域</div>
        <router-link to="/one">Go to one</router-link>
        <router-link to="/two">Go to two</router-link>
  
        <div>页面区域</div>
          <router-view />
      </div>
    </div>
  </template>

• index.html

  <div id="app"></div>

• main.js

  import Vue from "vue"
  import App from "./App.vue"
  import Router from 'vue-router'
  Vue.use(Router)
  
  const routes = [
    { path: '/one', component: {template: '<div>第一个组件</div>' } },
    { path: '/two', component: {template: '<div>第二个组件</div>' } }
  ]
  
  const router = new Router({
    routes // (缩写) 相当于 routes: routes
  })
  
  new Vue({
    el: "#app",
    router,
    components: {App},
    template: '<App/>'
  })
  

• webpack.config.js

   const path = require('path')
   const webpack = require('webpack')
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const { CleanWebpackPlugin } = require('clean-webpack-plugin')
   const VueLoaderPlugin = require('vue-loader/lib/plugin')
  
  
   module.exports = env => {
     if (!env) { env = {} }
  
     const plugins = [
       new VueLoaderPlugin(),
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
         template: './index.html'
       })
     ]
  
  
  
     return {
       mode: env.production,
       entry: {
         app: './main.js'
       },
       resolve: {
         extensions: ['.vue', '.csss', '.js', '.json'], // 可忽略的后缀
         alias: {
           'vue$': 'vue/dist/vue.esm.js',
           '@': path.join(__dirname, 'src')
         }
       },
       devtool: 'inline-source-map',
       devServer: {
         contentBase: path.join(__dirname, 'dist'),
         compress: true, // 开启gzip压缩
         port: 9000
       },
       module: {
         rules: [
           {
             test: /\.html$/,
             loader: 'html-loader'
           },
           {
             test: /\.vue$/,
             loader: 'vue-loader'
           }
         ]
       },
       plugins,
       output: {
         filename: '[name].min.js',
         path: path.resolve(__dirname, 'dist')
       }
  
     }
   }
  

• package.json

      {
    "name": "d",
    "version": "1.0.0",
    "description": "",
    "main": "一个简单的例子",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "webpack-dev-server"
    },
    "author": "weiali.info",
    "license": "ISC",
    "dependencies": {
      "clean-webpack-plugin": "^3.0.0",
      "css-loader": "^2.1.1",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "vue": "^2.6.10",
      "vue-router": "^3.0.6",
      "vue-style-loader": "^4.1.2",
      "webpack-cli": "^3.3.2"
    },
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-loader": "^8.0.6",
      "babel-preset-es2015": "^6.24.1",
      "vue-loader": "^15.7.0",
      "vue-template-compiler": "^2.6.10",
      "webpack": "^4.33.0",
      "webpack-dev-server": "^3.6.0"
    }
  }
  
  

  如何运行？

  • npm i
  • npm run dev

创建最基础的VUE单文件项目

标签：路由   map   product   entry   plugin   npm   des   文件   dirname   

原文地址：https://www.cnblogs.com/weilai-info/p/10987745.html