Cara membuat aplikasi Vue.js menggunakan Komponen Fail Tunggal, tanpa CLI.

Pemahaman mengenai komponen fail tunggal (SFC) dan Pengurus Pakej Node (NPM) Vue akan membantu artikel ini.

Antaramuka baris perintah kerangka kerja, atau CLI, adalah kaedah pilihan untuk membuat perancah projek. Ini menyediakan titik permulaan fail, folder, dan konfigurasi. Perancah ini juga menyediakan proses pengembangan dan pembinaan. Proses pengembangan menyediakan cara untuk melihat kemas kini berlaku semasa anda mengedit projek anda. Proses membina membuat versi terakhir fail yang akan digunakan dalam pengeluaran.

Memasang dan menjalankan Vue.js ("Vue") dapat dilakukan dengan tag skrip yang menunjuk ke rangkaian penghantaran kandungan Vue (CDN). Tidak perlu proses pembinaan atau pembangunan. Tetapi, jika anda menggunakan komponen fail tunggal Vue (SFC), anda perlu menukar fail tersebut menjadi sesuatu yang dapat difahami oleh penyemak imbas. Fail perlu ditukar menjadi Hyper-Text Markup Language (HTML), Cascading Style Sheets (CSS), dan JavaScript (JS). Dalam kes ini, proses pembangunan dan pembinaan mesti digunakan.

Daripada bergantung pada Vue CLI untuk membuat perancah projek kami dan memberi kami proses pembangunan dan pembinaan, kami akan membina projek dari awal. Kami akan membuat proses pembangunan dan pembangunan sendiri menggunakan Webpack.

Apa itu Webpack?

Webpack adalah penyusun modul. Ia menggabungkan kod dari beberapa fail menjadi satu. Sebelum Webpack, pengguna memasukkan tag skrip untuk setiap fail JavaScript. Walaupun penyemak imbas perlahan menyokong modul ES6, Webpack terus menjadi kaedah pilihan untuk membina kod modular.

Selain menjadi bundler modul, Webpack juga dapat mengubah kod. Sebagai contoh, Webpack dapat menggunakan JavaScript moden (ECMAScript 6+) dan mengubahnya menjadi ECMAScript 5. Walaupun Webpack menggabungkan kod itu sendiri, ia mengubah kod tersebut dengan pemuat dan pemalam. Anggap pemuat dan pemalam sebagai tambahan untuk Webpack.

Webpack dan Vue

Komponen fail tunggal membolehkan kita membina keseluruhan komponen (struktur, gaya, dan fungsi) dalam satu fail. Dan, kebanyakan penyunting kod memberikan penekanan sintaksis dan penyisipan untuk SFC ini.

Perhatikan fail diakhiri dengan .vue. Penyemak imbas tidak tahu apa yang perlu dilakukan dengan pelanjutan itu. Webpack, melalui penggunaan loader dan plugin, mengubah fail ini menjadi HTML, CSS, dan JS yang dapat digunakan oleh penyemak imbas.

Projek: Membina Aplikasi Hello World Vue Menggunakan Komponen Satu Fail.

Langkah 1: Buat struktur projek

Projek Vue yang paling asas akan merangkumi HTML, JavaScript, dan fail Vue (fail yang berakhir dengan .vue ). Kami akan meletakkan fail-fail ini dalam folder yang dipanggil src. Folder sumber akan membantu kita memisahkan kod yang kita tulis dari kod yang akhirnya akan dibina oleh Webpack.

Oleh kerana kita akan menggunakan Webpack, kita memerlukan fail konfigurasi Webpack.

Selain itu, kami akan menggunakan penyusun yang dipanggil Babel. Babel membolehkan kita menulis kod ES6 yang kemudiannya disusun menjadi ES5. Babel adalah salah satu "ciri tambahan" untuk Webpack. Babel juga memerlukan fail konfigurasi.

Akhirnya, kerana kita menggunakan NPM, kita juga akan mempunyai folder node_modules dan fail package.json. Itu akan dibuat secara automatik apabila kita memulakan projek kita sebagai projek NPM dan mula memasang pergantungan kita.

Untuk memulakan, buat folder yang dipanggil hello-world. Dari baris arahan, ubah ke direktori itu dan jalankan npm init. Ikuti arahan di skrin untuk membuat projek. Kemudian, buat folder yang lain (kecuali untuk node_modules) seperti yang dijelaskan di atas. Struktur projek anda akan kelihatan seperti ini:

Langkah 2: Pasang kebergantungan

Berikut adalah susunan cepat kebergantungan yang kami gunakan:

vue : Rangka kerja JavaScript

vue-loader dan vue-template-compiler : Digunakan untuk menukar fail Vue kami menjadi JavaScript.

beg web : Alat yang akan membolehkan kami meneruskan kod kami melalui beberapa transformasi dan menggabungkannya ke dalam satu fail.

webpack-cli: Diperlukan untuk menjalankan perintah Webpack.

webpack-dev-server : Walaupun tidak diperlukan untuk proyek kecil kami (kerana kami tidak akan membuat permintaan HTTP), kami masih akan "melayani" projek kami dari pelayan pembangunan.

babel-loader : Ubah kod ES6 kami menjadi ES5. (Ia memerlukan pertolongan dari dua kebergantungan berikutnya.)

@ babel / core dan @ babel / preset-env : Babel dengan sendirinya tidak melakukan apa-apa pada kod anda. Kedua-dua "add-on" ini akan membolehkan kita mengubah kod ES6 kita menjadi kod ES5.

css-loader: Mengambil CSS yang kami tulis di kami.vuefail atau CSS apa pun yang mungkin kami impor ke salah satu fail JavaScript kami dan menyelesaikan jalan ke fail tersebut. Dengan kata lain, cari tahu di mana CSS berada. Ini adalah loader lain yang dengan sendirinya tidak akan banyak melakukan. Kami memerlukan pemuat seterusnya untuk benar-benar melakukan sesuatu dengan CSS.

vue-style-loader : Ambil CSS yang kami dapat css-loaderdan masukkan ke dalam fail HTML kami. Ini akan membuat dan memasukkan tanda gaya di kepala dokumen HTML kami.

html-webpack-plugin : Ikuti index.html kami dan masukkan fail JavaScript kami di kepala. Kemudian, salin fail ini ke dalamdistfolder.

rimraf : Membolehkan kami, dari baris arahan, untuk menghapus fail. Ini akan sangat berguna apabila kita membina projek kita berkali-kali. Kami akan menggunakannya untuk memadam binaan lama.

Mari pasang kebergantungan ini sekarang. Dari baris arahan, jalankan:

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

Catatan: “-D” di hujung menandakan setiap kebergantungan sebagai ketergantungan pembangunan dalam pakej kami.json. Kami menggabungkan semua kebergantungan dalam satu fail, jadi, untuk projek kecil kami, kami tidak mempunyai pergantungan pengeluaran.

Langkah 3: Buat fail (Kecuali fail konfigurasi Webpack kami).

 {{ 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'], }

Sehingga ke tahap ini, tidak ada yang kelihatan terlalu asing. Saya menyimpan setiap fail dengan sangat asas. Saya hanya menambah CSS dan JS minimum untuk melihat aliran kerja kami dalam tindakan.

Langkah 4: Mengarahkan Webpack apa yang perlu dilakukan

Semua konfigurasi yang perlu diakses oleh Webpack kini ada. Kita perlu melakukan dua perkara terakhir: Beritahu Webpack apa yang harus dilakukan dan jalankan Webpack.

Berikut adalah fail konfigurasi Webpack ( webpack.config.js). Buat fail ini di direktori root projek. Garis demi garis kita akan membincangkan apa yang berlaku.

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(), ] };

Baris 1 dan 2: Kami mengimport dua plugin yang kami gunakan di bawah. Perhatikan, pemuat kami biasanya tidak perlu diimport, hanya pemalam kami. Dan dalam kes kami, yangvue-loader (yang kami gunakan di baris 9) juga memerlukan plugin untuk berfungsi (namun, Babel, misalnya, tidak).

Baris 4: Kami mengeksport konfigurasi kami sebagai objek. Ini memberi kita akses kepadanya ketika kita menjalankan perintah Webpack.

Baris 5: Ini adalah modul kemasukan kami. Webpack memerlukan tempat untuk bermula. Ia kelihatan dalam main.jsfail kami dan kemudian mula menyisipkan kod kami dari saat itu.

Baris 6 dan 7: Ini adalah objek modul. Di sini, kita terutamanya menerapkan pelbagai peraturan. Setiap peraturan memberitahu Webpack bagaimana menangani fail tertentu. Oleh itu, sementara Webpack menggunakan titik masuk main.jsuntuk mula menyisir kod kami, ia menggunakan peraturan untuk mengubah kod kami.

Baris 8 (peraturan): Peraturan ini memerintahkan Webpack untuk menggunakan babel-loaderfail apa pun yang berakhir dengan .js. Ingat, Babel akan mengubah ES6 + menjadi ES5.

Baris 9 (peraturan): Peraturan ini memerintahkan untuk menggunakan Webpackvue-loader(dan jangan lupa plugin yang berkaitan pada baris 17) untuk mengubah .vuefail kami menjadi JavaScript.

Baris 10 (peraturan): Kadang-kadang kita mahu menyebarkan fail melalui dua pemuat. Secara berlawanan, Webpack akan meneruskan fail dari kanan ke kiri dan bukannya kiri ke kanan. Di sini kita menggunakan dua pemuat dan mengatakan kepada Webpack: "dapatkan CSS saya dari file Vue saya atau fail JavaScript apa pun ( css-loader) dan masukkan ke dalam HTML saya sebagai tag gaya ( vue-style-loader).

Baris 11 dan 12: Tutup susunan peraturan dan objek modul kami.

Garis 13: Buat susunan pemalam. Di sini kita akan menambah dua plugin yang kita perlukan.

Line: 14 -16 (plugin): The HtmlWebpackPluginmengambil lokasi satu kami index.html fail dan menambah fail JavaScript kami dibundel kepadanya melalui tag skrip. Plugin ini juga akan menyalin fail HTML ke folder pengedaran kami semasa kami membina projek kami.

Line 17 (plugin): The VueLoaderPluginbekerja dengan kami vue-loaderuntuk menghuraikan kami .vuefail.

Baris 18: Tutup array pemalam.

Baris 19: Tutup objek Webpack yang kita eksport.

Langkah 5: Siapkan fail package.json kami supaya kami dapat menjalankan Webpack

Konfigurasi kami selesai, sekarang kami ingin melihat aplikasi kami. Sebaiknya, semasa kita membuat perubahan pada aplikasi kita, penyemak imbas akan dikemas kini secara automatik. Ini mungkin berlaku dengan 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.

Conclusion

Understanding the build process behind the frameworks you use will help you to better understand the framework itself. Take some time to try to build an Angular, React or another Vue Project without the use of the respective CLIs. Or, just build a basic three-file site (index.html, styles.css, and app.js), but use Webpack to serve and build a production version.

Thanks for reading!

woz