proyecto webpack-Vue

Crear proyecto

Puede encontrar problemas de permisos al usar NPM para instalar dependencias de componentes relacionadas. En este caso, puede ejecutar en modo administrador de PowerShell; Menú Inicio-> clic derecho-> Windows PowerShell (administrador)

Crea un proyecto llamado v_music

# 使用 webpack 打包工具初始化一个名为 v_music  的工程 
vue init webpack v_music

Instalar dependencias

Necesitamos instalar cuatro complementos: vue-router, element-ui, vue-axios, sass-loader y node-sass

# 进入工程目录
cd v_music
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装 axios
npm install --save axios vue-axios
# 安装 SASS 加载器
npm install sass-loader node-sass --save-dev

# 安装依赖
npm install

Inicia el proyecto

npm run dev

Efecto corriente

Abra http: // localhost: 8080 en el navegador y verá el siguiente efecto

Anexo: descripción del comando relacionado con NPM

npm install moduleName: instala el módulo en el directorio del proyecto
npm install -g moduleName: -g significa instalar el módulo en el global, la ubicación que está instalada en el disco, depende de la ubicación del prefijo de configuración npm
npm install -save moduleName: --save significa instalar el módulo en el directorio del proyecto y escribir dependencias en el nodo de dependencias del archivo del paquete, -S es la abreviatura del comando
npm install -save-dev moduleName: --save-dev significa instalar el módulo en el directorio del proyecto y escribir dependencias en el nodo devDependencies del archivo del paquete, -D es la abreviatura del comando

Código fuente

Configurar enrutamiento

Crear tabla de enrutamiento

Cree una carpeta de enrutador en src y cree index.js en ella, este archivo es una tabla de enrutamiento

import Vue from 'vue'
import VueRouter from "vue-router";

import Login from "../views/login";

// 安装路由
Vue.use(VueRouter);

// 配置路由
export default new VueRouter({
  routes:[
    {
      //路由路径
      path:'/login',
      //路由名称
      name:'Login',
      //跳转到组件
      component:Login
    }
  ]
})

Configure la tabla de enrutamiento en main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'	//全局使用路由模块
// 导入上面创建的路由配置目录
import router from './router'

Vue.use(VueRouter);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

Crear una vista de enrutamiento en App.vue

<template>
  <div id="app">
    <router-view>首页</router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
</style>

vue: webpack crea un proyecto completo