Πώς να δημιουργήσετε μια εφαρμογή Vue.js χρησιμοποιώντας στοιχεία ενός αρχείου, χωρίς το CLI.

Η κατανόηση των στοιχείων ενός αρχείου (SFC) και του Node Package Manager (NPM) της Vue θα είναι χρήσιμη για αυτό το άρθρο.

Η διεπαφή γραμμής εντολών ενός πλαισίου, ή το CLI, είναι η προτιμώμενη μέθοδος σκαλωσιάς ενός έργου. Παρέχει ένα σημείο εκκίνησης αρχείων, φακέλων και διαμόρφωσης. Αυτό το ικριώματα παρέχει επίσης μια διαδικασία ανάπτυξης και κατασκευής. Μια διαδικασία ανάπτυξης παρέχει έναν τρόπο για να δείτε ενημερώσεις που συμβαίνουν καθώς επεξεργάζεστε το έργο σας. Η διαδικασία κατασκευής δημιουργεί την τελική έκδοση των αρχείων που θα χρησιμοποιηθούν στην παραγωγή.

Η εγκατάσταση και η εκτέλεση του Vue.js ("Vue") μπορεί να γίνει με μια ετικέτα σεναρίου που οδηγεί στο δίκτυο παράδοσης περιεχομένου της Vue (CDN). Δεν απαιτείται διαδικασία κατασκευής ή ανάπτυξης. Ωστόσο, εάν χρησιμοποιείτε στοιχεία ενός αρχείου Vue (SFC), πρέπει να μετατρέψετε αυτά τα αρχεία σε κάτι που το πρόγραμμα περιήγησης μπορεί να κατανοήσει. Τα αρχεία πρέπει να μετατραπούν σε Hyper-Text Markup Language (HTML), Cascading Style Sheets (CSS) και JavaScript (JS). Σε αυτήν την περίπτωση, πρέπει να χρησιμοποιηθεί μια διαδικασία ανάπτυξης και κατασκευής.

Αντί να στηριχθούμε στο Vue CLI για να σκαρφαλώσουμε το έργο μας και να μας παράσχει μια διαδικασία ανάπτυξης και κατασκευής, θα δημιουργήσουμε ένα έργο από το μηδέν. Θα δημιουργήσουμε τη δική μας διαδικασία ανάπτυξης και κατασκευής χρησιμοποιώντας το Webpack.

Τι είναι το Webpack;

Το Webpack είναι ένα πρόγραμμα δέσμης στοιχείων. Συγχωνεύει τον κώδικα από πολλά αρχεία σε ένα. Πριν από το Webpack, ο χρήστης περιλάμβανε μια ετικέτα σεναρίου για κάθε αρχείο JavaScript. Παρόλο που τα προγράμματα περιήγησης υποστηρίζουν αργά τις μονάδες ES6, το Webpack εξακολουθεί να είναι ο προτιμώμενος τρόπος δημιουργίας αρθρωτού κώδικα.

Εκτός του ότι είναι ένα πρόγραμμα δέσμης στοιχείων, το Webpack μπορεί επίσης να μετατρέψει κώδικα. Για παράδειγμα, το Webpack μπορεί να λάβει σύγχρονο JavaScript (ECMAScript 6+) και να το μετατρέψει σε ECMAScript 5. Ενώ το Webpack ομαδοποιεί τον ίδιο τον κώδικα, μετατρέπει τον κώδικα με φορτωτές και πρόσθετα. Σκεφτείτε τους φορτωτές και τα πρόσθετα ως πρόσθετα για το Webpack.

Webpack και Vue

Τα στοιχεία ενός αρχείου μας επιτρέπουν να δημιουργήσουμε ένα ολόκληρο στοιχείο (δομή, στυλ και λειτουργία) σε ένα αρχείο. Και, οι περισσότεροι συντάκτες κώδικα παρέχουν επισήμανση σύνταξης και χνούδι για αυτά τα SFC.

Παρατηρήστε ότι το αρχείο τελειώνει με .vue. Το πρόγραμμα περιήγησης δεν ξέρει τι να κάνει με αυτήν την επέκταση. Το Webpack, μέσω της χρήσης φορτωτών και προσθηκών, μετατρέπει αυτό το αρχείο σε HTML, CSS και JS που μπορεί να καταναλώσει το πρόγραμμα περιήγησης.

Το έργο: Δημιουργήστε μια εφαρμογή Hello World Vue χρησιμοποιώντας στοιχεία ενός αρχείου.

Βήμα 1: Δημιουργήστε τη δομή του έργου

Το πιο βασικό έργο Vue θα περιλαμβάνει HTML, JavaScript και αρχείο Vue (το αρχείο που τελειώνει σε .vue ). Θα τοποθετήσουμε αυτά τα αρχεία σε ένα φάκελο που ονομάζεται src. Ο φάκελος προέλευσης θα μας βοηθήσει να διαχωρίσουμε τον κώδικα που γράφουμε από τον κώδικα που θα δημιουργήσει το Webpack

Εφόσον θα χρησιμοποιούμε το Webpack, χρειαζόμαστε ένα αρχείο διαμόρφωσης Webpack.

Επιπλέον, θα χρησιμοποιήσουμε έναν μεταγλωττιστή που ονομάζεται Babel. Το Babel μας επιτρέπει να γράψουμε κώδικα ES6 τον οποίο στη συνέχεια συντάσσει σε ES5. Το Babel είναι ένα από αυτά τα "πρόσθετα χαρακτηριστικά" για το Webpack. Το Babel χρειάζεται επίσης ένα αρχείο διαμόρφωσης.

Τέλος, δεδομένου ότι χρησιμοποιούμε NPM, θα έχουμε επίσης έναν φάκελο node_modules και ένα αρχείο package.json. Αυτά θα δημιουργηθούν αυτόματα όταν ξεκινήσουμε το έργο μας ως έργο NPM και αρχίσουμε να εγκαθιστούμε τις εξαρτήσεις μας.

Για να ξεκινήσετε, δημιουργήστε έναν φάκελο που ονομάζεται hello-world. Από τη γραμμή εντολών, μεταβείτε σε αυτόν τον κατάλογο και εκτελέστε npm init. Ακολουθήστε τις οδηγίες στην οθόνη για να δημιουργήσετε το έργο. Στη συνέχεια, δημιουργήστε τους υπόλοιπους φακέλους (εκτός από node_modules) όπως περιγράφεται παραπάνω. Η δομή του έργου σας θα πρέπει να έχει την εξής μορφή:

Βήμα 2: Εγκαταστήστε τις εξαρτήσεις

Ακολουθεί μια γρήγορη επιστροφή των εξαρτήσεων που χρησιμοποιούμε:

vue : Το πλαίσιο JavaScript

vue-loader και vue-template-compiler : Χρησιμοποιείται για τη μετατροπή των αρχείων Vue σε JavaScript.

webpack : Το εργαλείο που θα μας επιτρέψει να περάσουμε τον κώδικά μας μέσω ορισμένων μετασχηματισμών και να τον ομαδοποιήσουμε σε ένα αρχείο.

webpack-cli: Απαιτείται η εκτέλεση των εντολών Webpack.

webpack-dev-server : Παρόλο που δεν απαιτείται για το μικρό μας έργο (καθώς δεν θα κάνουμε αιτήματα HTTP), θα εξακολουθήσουμε να "εξυπηρετούμε" το έργο μας από έναν διακομιστή ανάπτυξης.

babel-loader : Μεταμορφώστε τον κωδικό ES6 σε ES5. (Χρειάζεται βοήθεια από τις επόμενες δύο εξαρτήσεις.)

@ babel / core και @ babel / preset-env : Το Babel από μόνο του δεν κάνει τίποτα στον κώδικά σας. Αυτά τα δύο "πρόσθετα" θα μας επιτρέψουν να μετατρέψουμε τον κώδικα ES6 σε κώδικα ES5.

css-loader: Παίρνει το CSS που γράφουμε στο δικό μας.vueαρχεία ή οποιοδήποτε CSS ενδέχεται να εισαγάγουμε σε οποιοδήποτε από τα αρχεία JavaScript και να επιλύσουμε τη διαδρομή προς αυτά τα αρχεία. Με άλλα λόγια, μάθετε πού βρίσκεται το CSS. Αυτός είναι ένας άλλος φορτωτής που από μόνος του δεν θα κάνει πολλά. Χρειαζόμαστε τον επόμενο φορτωτή για να κάνουμε πραγματικά κάτι με το CSS.

vue-style-loader : Πάρτε το CSS που λάβαμε από μας css-loaderκαι εισάγετε το στο αρχείο HTML. Αυτό θα δημιουργήσει και θα εισαγάγει μια ετικέτα στυλ στην κορυφή του εγγράφου HTML.

html-webpack-plugin : Πάρτε το index.html μας και εισάγετε το αρχείο JavaScript που έχουμε συγκεντρώσει. Στη συνέχεια, αντιγράψτε αυτό το αρχείο στοdistντοσιέ.

rimraf : Μας επιτρέπει, από τη γραμμή εντολών, να διαγράφουμε αρχεία. Αυτό θα είναι χρήσιμο όταν χτίζουμε το έργο μας πολλές φορές. Θα το χρησιμοποιήσουμε για να διαγράψουμε τυχόν παλιές εκδόσεις.

Ας εγκαταστήσουμε αυτές τις εξαρτήσεις τώρα. Από τη γραμμή εντολών, εκτελέστε:

npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env css-loader vue-style-loader html-webpack-plugin rimraf -D

Σημείωση: Το "-D" στο τέλος σηματοδοτεί κάθε εξάρτηση ως εξάρτηση ανάπτυξης στο package.json μας. Συγκεντρώνουμε όλες τις εξαρτήσεις σε ένα αρχείο, έτσι, για το μικρό μας έργο, δεν έχουμε εξαρτήσεις παραγωγής.

Βήμα 3: Δημιουργήστε τα αρχεία (Εκτός από το αρχείο διαμόρφωσης Webpack).

 {{ message }} export default { data() { return { message: 'Hello World', }; }, };   #app { font-size: 18px; font-family: 'Roboto', sans-serif; color: blue; } 
  Vue Hello World 
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App), });
module.exports = { presets: ['@babel/preset-env'], }

Μέχρι αυτό το σημείο, τίποτα δεν πρέπει να φαίνεται πολύ ξένο. Έχω κρατήσει κάθε αρχείο πολύ βασικό. Έχω προσθέσει μόνο ελάχιστο CSS και JS για να δούμε τη ροή εργασίας μας σε δράση.

Βήμα 4: Διδάσκοντας στο Webpack τι να κάνουμε

Όλη η διαμόρφωση στο Webpack για την οποία έχει πρόσβαση είναι πλέον παρούσα. Πρέπει να κάνουμε δύο τελικά πράγματα: Πείτε στο Webpack τι να κάνετε και τρέξτε το Webpack.

Ακολουθεί το αρχείο διαμόρφωσης Webpack ( webpack.config.js). Δημιουργήστε αυτό το αρχείο στον ριζικό κατάλογο έργων. Γραμμή προς γραμμή θα συζητήσουμε τι συμβαίνει.

const HtmlWebpackPlugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { entry: './src/main.js', module: { rules: [ { test: /\.js$/, use: 'babel-loader' }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader']}, ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }), new VueLoaderPlugin(), ] };

Γραμμές 1 και 2: Εισάγουμε τα δύο πρόσθετα που χρησιμοποιούμε παρακάτω. Παρατηρήστε, οι φορτωτές μας δεν χρειάζεται κανονικά να εισαχθούν, μόνο οι προσθήκες μας. Και στην περίπτωσή μας, τοvue-loader (το οποίο χρησιμοποιούμε στη γραμμή 9) χρειάζεται επίσης ένα plugin για να λειτουργήσει (ωστόσο, το Babel, για παράδειγμα, δεν το κάνει).

Γραμμή 4: Εξάγουμε τη διαμόρφωση ως αντικείμενο. Αυτό μας δίνει πρόσβαση σε αυτό όταν εκτελούμε τις εντολές Webpack.

Γραμμή 5: Αυτή είναι η ενότητα εισόδου μας. Το Webpack χρειάζεται ένα μέρος για να ξεκινήσει. Κοιτάζει στο main.jsαρχείο μας και στη συνέχεια ξεκινά να χτενίζει τον κώδικα από εκείνο το σημείο.

Γραμμές 6 και 7: Αυτό είναι το αντικείμενο της ενότητας. Εδώ, περνάμε κυρίως σε μια σειρά κανόνων. Κάθε κανόνας λέει στο Webpack πώς να χειρίζεται συγκεκριμένα αρχεία. Έτσι, ενώ το Webpack χρησιμοποιεί το σημείο εισόδου για main.jsνα αρχίσει να χτενίζει τον κώδικα μας, χρησιμοποιεί τους κανόνες για να μετατρέψει τον κώδικα μας.

Γραμμή 8 (κανόνας): Αυτός ο κανόνας δίνει εντολή στο Webpack να χρησιμοποιεί τα babel-loaderαρχεία που τελειώνουν με .js. Θυμηθείτε, ο Babel θα μετατρέψει το ES6 + σε ES5.

Γραμμή 9 (κανόνας): Αυτός ο κανόνας δίνει εντολή στη χρήση του Webpackvue-loader(and don’t forget the associated plugin on line 17) to transform our .vue files into JavaScript.

Line 10 (rule): Sometimes we want to pass a file through two loaders. Counterintuitively, Webpack will pass the file from right to left instead of left to right. Here we are using two loaders and saying to Webpack: “get my CSS from my Vue file or any JavaScript files(css-loader) and inject it into my HTML as a style tag (vue-style-loader).

Lines 11 and 12: Close out our rules array and module object.

Lines 13: Create a plugins array. Here we will add the two plugins we need.

Line: 14 -16 (plugin): The HtmlWebpackPlugin takes the location of our index.html file and adds our bundled JavaScript file to it via a script tag. This plugin will also copy the HTML file to our distribution folder when we build our project.

Line 17 (plugin): The VueLoaderPlugin works with our vue-loader to parse our .vue files.

Line 18: Close out the plugins array.

Line 19: Close out the Webpack object that we are exporting.

Step 5: Setting up our package.json file so we can run Webpack

Our configuration is complete, now we want to see our application. Ideally, as we make changes to our application, the browser would update automatically. This is possible with webpack-dev-server.

Delete the test script in our package.json file, and replace it with a script to serve our application:

 { "name": "hello-world", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "serve": "webpack-dev-server --mode development" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.1.6", "@babel/preset-env": "^7.1.6", "babel-loader": "^8.0.4", "css-loader": "^1.0.1", "html-webpack-plugin": "^3.2.0", "rimraf": "^2.6.2", "vue": "^2.5.17", "vue-loader": "^15.4.2", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.5.17", "webpack": "^4.26.0", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" }, "dependencies": {} }

The name of this command is your choice. I chose to call mine serve since we will be serving our application.

From our terminal or command line, we can run npm run serve and that in turn will run webpack-dev-server --mode development .

The --mode development is what’s called a flag or option. We haven’t talked about this, but it essentially instructs Webpack that you are in development mode. We can also pass in --mode production which we will do when we build our project. These aren’t necessarily required for Webpack to work. Without these, you will get a warning message telling you to provide a mode when you run Webpack .

I say “necessarily required” because Webpack will minimize our code in production mode but not in development. So, don’t think those commands don’t do anything–they do.

Let’s run npm run serve and see what happens.

When we run npm run serve we get some output in our terminal. And, if everything goes well:

And if we scroll up a bit:

Point your browser to //localhost:8080. You will see your Blue Hello World message in Roboto font.

Now, let’s update the project and change the message to Hello Universe. Notice that the webpage refreshes automatically. That’s great, right? Can you think of a downside?

Let’s change the application just a bit and include an input which we will bind a variable to (with v-model). We will output the variable in an

tag below the input. I’ve also updated the styling section to style the message now. Our App.vuefile should look like this:

{{ message }}

export default { data() { return { message: 'Hello world!', }; }, }; .message { font-size: 18px; font-family: 'Roboto', sans-serif; color: blue; }

When we serve our application, we will have an input with a message of Hello World below it. The input is bound to the message variable, so as we type, we change the

content. Go ahead, type into the input to change the

content.

Now go back to your editor, and below the

tag, add the following:

Some Other Message

Save your App.vue and watch what happens.

The h2 we just updated by typing in our input reverted back to Hello World. This is because the browser actually refreshes, and the script tag and page are loaded again. In other words, we were not able to maintain the state of our application. This may not seem like a big deal, but as you are testing your application and adding data to it, it will be frustrating if your app “resets” every time. Fortunately, Webpack offers us a solution called Hot Module Replacement.

The hot module replacement is a plugin provided by Webpack itself. Up until this point, we have not used the Webpack object itself in our configuration file. However, we will now import Webpack so we can access the plugin.

In addition to the plugin, we will pass one additional option to Webpack, the devServer option. In that option, we will set hot to true. Also, we will make an (optional) update to our build workflow: We will open the browser window automatically when we run npm run serve. We do this by setting open to true which is also inside the devServer option.

const HtmlWebpackPlugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const webpack = require('webpack'); module.exports = { entry: './src/main.js', module: { rules: [ { test: /\.js$/, use: 'babel-loader' }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader']}, ] }, devServer: { open: true, hot: true, }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }), new VueLoaderPlugin(), new webpack.HotModuleReplacementPlugin(), ] };

Notice that we’ve imported Webpack so we could access the hotModuleReplacementPlugin. We’ve added that to the plugins array, and then told Webpack to use it with hot: true. We open the browser window automatically when we serve the application with open: true.

Run npm run serve:

The browser window should open, and if you open your dev tools, you should notice a slight change in the output. It now tells us hot module replacement is enabled. Let’s type in our input to change the

content. Then, change theh3 tag to read: One More Message.

Save your file and notice what happens.

The browser doesn't refresh, but our

change is reflected! The message we typed in the input remains, but the h3 updates. This allows our application to keep it’s state while we edit it.

Step 7: Building our project

So far, we’ve served our application. But, what if we want to build our application so we can distribute it?

If you noticed, when we serve our application, no files are created. Webpack creates a version of these files that only exist in temporary memory. If we want to distribute our Hello World app to our client, we need to build the project.

This is very simple. Just like before, we will create a script in our package.json file to tell Webpack to build our project. We will use webpack as the command instead of webpack-dev-server. We will pass in the --mode production flag as well.

We will also use the rimraf package first to delete any previous builds we may have. We do this simply by rimraf dist.

dist is the folder Webpack will automatically create when it builds our project. “Dist” is short for distribution–i.e. we are “distributing” our applications code.

The rimraf dist command is telling therimraf package to delete the dist directory. Make sure you don’t rimraf src by accident!

Webpack also offers a plugin that will accomplish this cleaning process called clean-webpack-plugin. I chose dist show an alternative way.

Our package.json file should look like this:

{ "name": "hello-world", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "clean": "rimraf dist", "build": "npm run clean && webpack --mode production", "serve": "webpack-dev-server --mode development" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.1.6", "@babel/preset-env": "^7.1.6", "babel-loader": "^8.0.4", "css-loader": "^1.0.1", "html-webpack-plugin": "^3.2.0", "rimraf": "^2.6.2", "vue": "^2.5.17", "vue-loader": "^15.4.2", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.5.17", "webpack": "^4.26.0", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" }, "dependencies": {} }

There are three things to notice:

  1. I’ve created a separate clean script so we can run it independently of our build script.
  2. npm run build will call the independent clean script we’ve created.
  3. I have && between npm run clean and webpack. This instruction says: “run npm run clean first, then run webpack”.

Let’s build the project.

npm run build

Webpack creates a dist directory, and our code is inside. Since our code makes no HTTP requests, we can simply open our index.html file in our browser and it will work as expected.

If we had code that was making HTTP requests, we would run into some cross-origin errors as we made those requests. We would need to run that project from a server for it to work.

Let’s examine the index.html that Webpack created in the browser and the code editor.

If we open it in our editor or take a look at the source code in our dev tools you will see Webpack injected the script tag. In our editor though, you won’t see the styles because the style tag is injected dynamically at runtime with JavaScript!

Also, notice our development console information is no longer present. This is because we passed the --production flag to Webpack.

συμπέρασμα

Η κατανόηση της διαδικασίας κατασκευής πίσω από τα πλαίσια που χρησιμοποιείτε θα σας βοηθήσει να κατανοήσετε καλύτερα το ίδιο το πλαίσιο. Αφιερώστε λίγο χρόνο για να προσπαθήσετε να δημιουργήσετε ένα Angular, React ή άλλο Vue Project χωρίς τη χρήση των αντίστοιχων CLI. Εναλλακτικά, δημιουργήστε έναν βασικό ιστότοπο τριών αρχείων (index.html, styles.css και app.js), αλλά χρησιμοποιήστε το Webpack για να προβάλλετε και να δημιουργήσετε μια έκδοση παραγωγής.

Ευχαριστώ για την ανάγνωση!

ουζ