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

概述创建文件 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>页面区域</di 创建文件

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单文件项目全部内容，希望文章能够帮你解决创建最基础的VUE单文件项目所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。