Proyecto vue.js en node.js sin CLI

Watch (Observadores) en vue js

Vue.js en su sitio web (como todos los frameworks) tiene si pagina de Get Started, donde nos proporciona la integración vía CDN y la integración vía CLI.

Vamos a enseñarte como crear tu proyecto en Vue.js sin el CLI y así tener control de los paquetes instalados en tu proyecto.

Requerimientos mínimos

Si eres desarrollador web quiero aprovechar para recomendarte estas herramientas que todo programador debe tener.

A parte de tu navegador y tu editor de codigo, solo te faltaría tener Node.js

Iniciar proyecto e instalar dependencias

Crea un directorio donde tu quieras, y accede ahí desde tu terminal y ejecuta el siguiente comando para iniciar el proyecto:

npm init

Sigue las instrucciones para completar la instalación.

Ahora necesitamos instalar las dependencias que van a producción.

npm install vue -S

Ahora instalamos las dependencias de desarrollo

npm install webpack webpack-cli @babel/core @babel/cli @babel/preset-env vue-loader babel-loader  vue-template-compiler  -D

Arquitectura de directorios

Les quiero mostrar como debe estar la estructura de nuestro directorio de nuestro proyecto

components/
  example.vue
public/
  index.html
index.js
webpack.config.js
package.json

Configurar webpack

Webpack va a ser la herramienta que compile nuestro código en EcmaScript a Javascript nativo para que los navegadores entiendan el código.

Vamos a crear el archivo ./webpack.config.js (Este es el archivo por defecto de configuración de webpack).

Vamos a realizar una estructura en JSON de las configuraciones básicas de webpack para que funcione muy bien.

const path = require('path');

module.exports = {
  entry: '',
  output: {},
  module:{
    rules:[]
  },
  resolve: {
    alias: {},
  },
  plugins:[]
}

Ahora bien.

Entry es la ruta del que webpack va a compilar. Para nuestro caso sera ./index.js

module.exports = {
  entry: './index.js'
}

El output es la ruta donde se guarda el archivo compilado.

module.exports = {
  ...
  output: {
    filename: 'js/app.js',
    path: path.resolve(__dirname, './public'),
  }
}

En Rules le vamos a decir a webpack que preprocesador vamos a utilizar para cada archivo. Ej: si usamos SASS necesitamos un preprocesador que pase de sass a css.

Necesitamos que nuestros archivos .js pasen de ES a JS y que nuestros archivos .vue también.

module.exports = {
  ...
  module:{
    rules:[
      // compilar ecmascript
      {
        exclude: /(node_modules|bower_components|vendors)/,
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
        }
      },
      // compilar componentes vue
      {
        exclude: /(node_modules|bower_components|vendors)/,
        test: /\.vue$/,
        use: {
          loader: 'vue-loader'
        }
      }
    ]
  },
}

Aora añadimos el alias de vue, para que no nos genere error.

module.exports = {
  ...
  resolve: {
    alias: {
      vue: 'vue/dist/vue.min.js'
    },
  },
}

Y por último añadimos el plugin del loader de vue.

...
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

Maquetado del sitio web

Lo único que tenemos que hacer es una estructura simple de html en nuestro index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js Get Started</title>
</head>
<body>
  <div id="app"></div>
  <script src="./js/app.js"></script>
</body>
</html>

Tengamos el cuenta la instrucción &lt;div id="app"&gt;&lt;/div&gt; con el id app

Instancia de Vue.js

Vamos a abrir nuestro archivo index.js e importamos vue y creamos una nueva instancia.

import Vue from 'vue'

new Vue({
  el: '#app'
})

La propiedad el debe tener el elemento al cual se le aplica la instancia de vue. en nustro caso nuestro elemento con el id="app"

Correr el proyecto

Antes que todo, abramos nuestro archivo package.json y vamos a colocar unos comandos para ejecutar nuestro proyecto.

{
  "scripts": {
    // ...
    "dev": "webpack index.js --mode=development",
    "watch": "webpack index.js --mode=development --watch",
    "prod": "webpack index.js --mode=production"
  }
  // ...
}

Ahora.

Si queremos desarrollar y queremos que nuestro código se compile cada ves que guardamos usamos el comando

npm run watch

Si solo queremos compilar para desarrollo usamos:

npm run dev

Si queremos compilar para producción

npm run prod

SI NO FUNCIONA por favor escríbeme en Twitter 😀

Creando mi primer componente en Vue.js

Abrimos el archivo ./components/example.vue y escribimos una estructura simple

Ahora lo importamos en nuestro index.js

// ...
import Example from './components/ecample.vue'

Vuew.component('example-component', Example)
// ...

y ahora añadimos nuestro componente a nuestro index.html dentro del elemento id="app" de la siguiente manera

<div id="app">
  <example-component></example-component>
</div>

Compila el proyecto y coloca en tu navegador el archivo html de la carpeta public.

Código en Github

Artículos que podrían gustarte