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

Posted 2021-12-28 weilai-info

创建文件

• 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