从零搭建vue单文件组件项目

福尔摩斯对我笑 2019-06-05 106 次 0条

创建文件

  • 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 ></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 run dev启动就好了

标签: 无

非特殊说明,本博所有文章均为博主原创。

头像也是LOGO
未来博客 博主大人
到了这个年纪,不应该再彷徨!

发表评论



 


暂无评论