Vue có biên dịch thành html không?

Question

Bạn có thể sử dụng v-htmldirective được sử dụng để hiển thị nội dung html tĩnh không yêu cầu bất kỳ xử lý sự kiện hoặc ràng buộc dữ liệu nào và theo

Nội dung chính Show

Dự án. Xây dựng ứng dụng Hello World Vue bằng các thành phần tệp đơn
Phần kết luận
Vue có sử dụng HTML và CSS không?
Vue có biên dịch không?
Tôi có thể xây dựng một trang web với Vue không?
Làm cách nào để biên dịch mã Vue JavaScript?

Nội dung của span sẽ được thay thế bằng giá trị của thuộc tính rawHtml, được hiểu là HTML đơn giản - các ràng buộc dữ liệu bị bỏ qua. Lưu ý rằng bạn không thể sử dụng v-html để soạn các phần mẫu, bởi vì Vue không phải là một công cụ tạo khuôn mẫu dựa trên chuỗi. Thay vào đó, các thành phần được ưu tiên làm đơn vị cơ bản để tái sử dụng và thành phần giao diện người dùng

một giải pháp khác là sử dụng gói v-runtime-template có trong https. //github. com/alexjoverm/v-runtime-template

Điều này có thể hữu ích cho trường hợp sử dụng của bạn, với tất cả những lo ngại thông thường về sự an toàn của các phương pháp này đối với việc tiêm độc hại

Sự hiểu biết về các thành phần tệp đơn (SFC) và Trình quản lý gói nút (NPM) của Vue sẽ hữu ích cho bài viết này

Giao diện dòng lệnh của khung, hoặc CLI, là phương pháp ưa thích để tạo ra một dự án. Nó cung cấp điểm bắt đầu của tệp, thư mục và cấu hình. Giàn giáo này cũng cung cấp một quá trình phát triển và xây dựng. Một quy trình phát triển cung cấp một cách để xem các cập nhật xảy ra khi bạn chỉnh sửa dự án của mình. Quá trình xây dựng tạo phiên bản cuối cùng của tệp sẽ được sử dụng trong sản xuất

Cài đặt và chạy Vue. js (“Vue”) có thể được thực hiện bằng thẻ script trỏ đến mạng phân phối nội dung Vue (CDN). Không cần quá trình xây dựng hoặc phát triển. Tuy nhiên, nếu bạn sử dụng các thành phần tệp đơn Vue (SFC), bạn cần chuyển đổi các tệp đó thành thứ mà trình duyệt có thể hiểu được. Các tệp cần được chuyển đổi sang Ngôn ngữ đánh dấu siêu văn bản (HTML), Biểu định kiểu xếp tầng (CSS) và JavaScript (JS). Trong trường hợp này, phải sử dụng quy trình phát triển và xây dựng

Thay vì dựa vào Vue CLI để dàn dựng dự án của chúng tôi và cung cấp cho chúng tôi quy trình phát triển và xây dựng, chúng tôi sẽ xây dựng một dự án từ đầu. Chúng tôi sẽ tạo quy trình xây dựng và phát triển của riêng mình bằng cách sử dụng Webpack

Webpack là gì?

Webpack là một gói mô-đun. Nó hợp nhất mã từ nhiều tệp thành một. Trước Webpack, người dùng đã bao gồm một thẻ script cho mỗi tệp JavaScript. Mặc dù các trình duyệt đang dần hỗ trợ các mô-đun ES6, nhưng Webpack vẫn tiếp tục là cách ưa thích để xây dựng mã mô-đun

Ngoài việc là một gói mô-đun, Webpack còn có thể chuyển đổi mã. Ví dụ: Webpack có thể sử dụng JavaScript hiện đại (ECMAScript 6+) và chuyển đổi nó thành ECMAScript 5. Mặc dù Webpack tự đóng gói mã nhưng nó chuyển đổi mã bằng các trình tải và plugin. Hãy coi các trình tải và plugin là tiện ích bổ sung cho Webpack

Webpack và Vue

Các thành phần tệp đơn cho phép chúng tôi xây dựng toàn bộ thành phần (cấu trúc, kiểu dáng và chức năng) trong một tệp. Và, hầu hết các trình soạn thảo mã đều cung cấp đánh dấu cú pháp và tô sáng cú pháp cho các SFC này

Thành phần tệp đơn Vue. chú ý. phần mở rộng vue

Lưu ý tập tin kết thúc bằng. vue. Trình duyệt không biết phải làm gì với tiện ích mở rộng đó. Webpack, thông qua việc sử dụng các trình tải và plugin, chuyển đổi tệp này thành HTML, CSS và JS mà trình duyệt có thể sử dụng

Dự án. Xây dựng ứng dụng Hello World Vue bằng các thành phần tệp đơn

Bước 1. Tạo cấu trúc dự án

Dự án Vue cơ bản nhất sẽ bao gồm HTML, JavaScript và tệp Vue (tệp kết thúc bằng. vue). Chúng tôi sẽ đặt các tệp này vào một thư mục có tên là

0. Thư mục nguồn sẽ giúp chúng tôi tách mã chúng tôi đang viết khỏi mã mà Webpack sẽ xây dựng sau này

Vì chúng tôi sẽ sử dụng Webpack, chúng tôi cần tệp cấu hình Webpack

Ngoài ra, chúng tôi sẽ sử dụng trình biên dịch có tên là Babel. Babel cho phép chúng tôi viết mã ES6, sau đó nó sẽ biên dịch thành ES5. Babel là một trong những “tính năng bổ trợ” cho Webpack. Babel cũng cần một tệp cấu hình

Cuối cùng, vì chúng tôi đang sử dụng NPM, chúng tôi cũng sẽ có một thư mục node_modules và một gói. tập tin json. Chúng sẽ được tạo tự động khi chúng tôi khởi tạo dự án của mình dưới dạng dự án NPM và bắt đầu cài đặt các phụ thuộc của chúng tôi

Để bắt đầu, hãy tạo một thư mục có tên là

1. Từ dòng lệnh, thay đổi thư mục đó và chạy

2. Làm theo lời nhắc trên màn hình để tạo dự án. Sau đó, tạo các thư mục còn lại (ngoại trừ

3) như mô tả ở trên. Cấu trúc dự án của bạn sẽ trông như thế này

Cấu trúc dự án Vue SFC đơn giản nhất

Bước 2. Cài đặt các phụ thuộc

Dưới đây là tóm tắt nhanh về các phụ thuộc mà chúng tôi đang sử dụng

vue. Khung JavaScript

vue-loader và vue-template-compiler. Được sử dụng để chuyển đổi các tệp Vue của chúng tôi thành JavaScript

gói web. Công cụ cho phép chúng tôi chuyển mã của mình qua một số phép biến đổi và gói mã đó vào một tệp

webpack-cli. Cần thiết để chạy các lệnh Webpack

webpack-dev-máy chủ. Mặc dù không cần thiết cho dự án nhỏ của chúng tôi (vì chúng tôi sẽ không thực hiện bất kỳ yêu cầu HTTP nào), chúng tôi vẫn sẽ "phục vụ" dự án của mình từ một máy chủ phát triển

babel-loader. Chuyển đổi mã ES6 của chúng tôi thành ES5. (Nó cần sự giúp đỡ từ hai phụ thuộc tiếp theo. )

@babel/core và @babel/preset-env. Bản thân Babel không làm gì với mã của bạn. Hai “tiện ích bổ sung” này sẽ cho phép chúng tôi chuyển đổi mã ES6 của mình thành mã ES5

trình tải css. Lấy CSS mà chúng tôi viết trong tệp

4 hoặc bất kỳ CSS nào chúng tôi có thể nhập vào bất kỳ tệp JavaScript nào của mình và giải quyết đường dẫn đến các tệp đó. Nói cách khác, hãy tìm ra vị trí của CSS. Đây là một trình tải khác mà bản thân nó sẽ không làm được gì nhiều. Chúng tôi cần trình tải tiếp theo để thực sự làm điều gì đó với CSS

vue-style-loader. Lấy CSS mà chúng tôi nhận được từ

5 và đưa nó vào tệp HTML của chúng tôi. Điều này sẽ tạo và chèn một thẻ kiểu vào phần đầu của tài liệu HTML của chúng tôi

html-webpack-plugin. Lấy chỉ số của chúng tôi. html và chèn tệp JavaScript đi kèm của chúng tôi vào đầu. Sau đó, sao chép tệp này vào thư mục

6

rimraf. Cho phép chúng tôi, từ dòng lệnh, xóa các tệp. Điều này sẽ có ích khi chúng tôi xây dựng dự án của mình nhiều lần. Chúng tôi sẽ sử dụng điều này để xóa mọi bản dựng cũ

Hãy cài đặt các phụ thuộc này ngay bây giờ. Từ dòng lệnh, chạy

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

Ghi chú. “-D” ở cuối đánh dấu mỗi phụ thuộc là một phụ thuộc phát triển trong gói của chúng tôi. json. Chúng tôi đang gói tất cả các phụ thuộc vào một tệp, vì vậy, đối với dự án nhỏ của chúng tôi, chúng tôi không có phụ thuộc sản xuất

Bước 3. Tạo các tệp (Ngoại trừ tệp cấu hình Webpack của chúng tôi)

a1-Ứng dụng. vue


  
    Vue Hello World

a1-index. html

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

a1-chính. js

module.exports = {
  presets: ['@babel/preset-env'],
}

a1-babelrc. js

Cho đến thời điểm này, không có gì có vẻ quá xa lạ. Tôi đã giữ từng tệp rất cơ bản. Tôi chỉ thêm CSS và JS tối thiểu để xem quy trình làm việc của chúng tôi đang hoạt động

Bước 4. Hướng dẫn Webpack phải làm gì

Tất cả cấu hình mà Webpack cần truy cập hiện đã có. Chúng ta cần làm hai việc cuối cùng. Cho Webpack biết phải làm gì và chạy Webpack

Dưới đây là file cấu hình Webpack (______0_______7). Tạo tệp này trong thư mục gốc của dự án. Từng dòng một chúng ta sẽ thảo luận về những gì đang xảy ra

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

a1-webpack. cấu hình. js

Dòng 1 và 2. Chúng tôi đang nhập hai plugin mà chúng tôi sử dụng bên dưới. Lưu ý, các trình tải của chúng tôi thường không cần nhập, chỉ cần các plugin của chúng tôi. Và trong trường hợp của chúng tôi,

8 (mà chúng tôi sử dụng trong dòng 9) cũng cần một plugin để hoạt động (tuy nhiên, chẳng hạn như Babel thì không)

Dòng 4. Chúng tôi xuất cấu hình của mình dưới dạng một đối tượng. Điều này cho phép chúng tôi truy cập vào nó khi chúng tôi chạy các lệnh Webpack

Dòng 5. Đây là mô-đun đầu vào của chúng tôi. Webpack cần một nơi để bắt đầu. Nó tìm trong tệp

9 của chúng tôi và sau đó bắt đầu xem qua mã của chúng tôi từ thời điểm đó

Dòng 6 và 7. Đây là đối tượng mô-đun. Ở đây, chúng tôi chủ yếu truyền vào một loạt các quy tắc. Mỗi quy tắc cho Webpack biết cách xử lý các tệp nhất định. Vì vậy, trong khi Webpack sử dụng điểm vào của

9 để bắt đầu duyệt qua mã của chúng tôi, thì nó sử dụng các quy tắc để biến đổi mã của chúng tôi

Dòng 8 (quy tắc). Quy tắc này hướng dẫn Webpack sử dụng


  
    Vue Hello World

1 trên bất kỳ tệp nào kết thúc bằng


  
    Vue Hello World

2. Hãy nhớ rằng, Babel sẽ chuyển đổi ES6+ thành ES5

Dòng 9 (quy tắc). Quy tắc này hướng dẫn Webpack sử dụng

8 (và đừng quên plugin được liên kết ở dòng 17) để chuyển đổi các tệp

4 của chúng tôi thành JavaScript

Dòng 10 (quy tắc). Đôi khi chúng tôi muốn chuyển một tệp qua hai trình tải. Ngược lại, Webpack sẽ truyền tệp từ phải sang trái thay vì từ trái sang phải. Ở đây chúng tôi đang sử dụng hai trình tải và nói với Webpack. “lấy CSS của tôi từ tệp Vue của tôi hoặc bất kỳ tệp JavaScript nào (

5) và đưa nó vào HTML của tôi dưới dạng thẻ kiểu (


  
    Vue Hello World

6)

Dòng 11 và 12. Đóng mảng quy tắc và đối tượng mô-đun của chúng tôi

Dòng 13. Tạo một mảng plugin. Ở đây chúng tôi sẽ thêm hai plugin chúng tôi cần

Đường kẻ. 14 -16 (phần bổ trợ).


  
    Vue Hello World

7 chiếm vị trí của chỉ mục của chúng tôi. html và thêm tệp JavaScript được đóng gói của chúng tôi vào tệp đó thông qua thẻ script. Plugin này cũng sẽ sao chép tệp HTML vào thư mục phân phối của chúng tôi khi chúng tôi xây dựng dự án của mình

Dòng 17 (phần bổ trợ).


  
    Vue Hello World

8 làm việc với

8 của chúng tôi để phân tích các tệp

4 của chúng tôi

Dòng 18. Đóng mảng plugin

Dòng 19. Đóng đối tượng Webpack mà chúng tôi đang xuất

Bước 5. Thiết lập gói của chúng tôi. json để chúng tôi có thể chạy Webpack

Cấu hình của chúng tôi đã hoàn tất, bây giờ chúng tôi muốn xem ứng dụng của mình. Lý tưởng nhất là khi chúng tôi thay đổi ứng dụng của mình, trình duyệt sẽ tự động cập nhật. Điều này có thể thực hiện được với

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

1

Xóa tập lệnh

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

2 trong tệp

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

3 của chúng tôi và thay thế nó bằng tập lệnh để phục vụ ứng dụng của chúng tôi


{
  "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": {}
}

a1-gói. json

Tên của lệnh này là sự lựa chọn của bạn. Tôi đã chọn gọi cho tôi là

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

4 vì chúng tôi sẽ phục vụ đơn đăng ký của mình

Từ thiết bị đầu cuối hoặc dòng lệnh của chúng tôi, chúng tôi có thể chạy

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

5 và đến lượt nó sẽ chạy

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

6

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

7 được gọi là cờ hoặc tùy chọn. Chúng tôi chưa nói về điều này, nhưng về cơ bản, nó hướng dẫn Webpack rằng bạn đang ở chế độ phát triển. Chúng ta cũng có thể thông qua

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

8 mà chúng ta sẽ làm khi xây dựng dự án của mình. Những thứ này không nhất thiết phải có để Webpack hoạt động. Nếu không có những thứ này, bạn sẽ nhận được một thông báo cảnh báo yêu cầu bạn cung cấp một chế độ khi bạn chạy Webpack

Tôi nói “bắt buộc phải có” vì Webpack sẽ thu nhỏ mã của chúng tôi ở chế độ sản xuất chứ không phải ở chế độ phát triển. Vì vậy, đừng nghĩ rằng những lệnh đó không làm gì cả - chúng làm

Hãy chạy

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

5 và xem điều gì sẽ xảy ra

Khi chúng tôi chạy

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

5, chúng tôi nhận được một số đầu ra trong thiết bị đầu cuối của mình. Và, nếu mọi thứ suôn sẻ

Và nếu chúng ta cuộn lên một chút

Trỏ trình duyệt của bạn tới

module.exports = {
  presets: ['@babel/preset-env'],
}

1. Bạn sẽ thấy thông báo Hello World màu xanh của mình bằng phông chữ Roboto

Bây giờ, hãy cập nhật dự án và thay đổi thông báo thành

module.exports = {
  presets: ['@babel/preset-env'],
}

2. Lưu ý rằng trang web tự động làm mới. Điều đó thật tuyệt phải không?

Hãy thay đổi ứng dụng một chút và bao gồm một đầu vào mà chúng ta sẽ liên kết một biến với (với

module.exports = {
  presets: ['@babel/preset-env'],
}

3). Chúng tôi sẽ xuất biến trong thẻ

module.exports = {
  presets: ['@babel/preset-env'],
}

4 bên dưới đầu vào. Tôi cũng đã cập nhật phần tạo kiểu để tạo kiểu cho tin nhắn ngay bây giờ. Tệp

module.exports = {
  presets: ['@babel/preset-env'],
}

5 của chúng ta sẽ trông như thế này

a11-Ứng dụng. vue

Khi chúng tôi phục vụ ứng dụng của mình, chúng tôi sẽ có đầu vào với thông báo _______11_______6 bên dưới nó. Đầu vào được liên kết với biến

module.exports = {
  presets: ['@babel/preset-env'],
}

7, vì vậy khi chúng tôi nhập, chúng tôi sẽ thay đổi nội dung của

module.exports = {
  presets: ['@babel/preset-env'],
}

4. Hãy tiếp tục, nhập vào đầu vào để thay đổi nội dung

module.exports = {
  presets: ['@babel/preset-env'],
}

4

Bây giờ hãy quay lại trình chỉnh sửa của bạn và bên dưới thẻ

module.exports = {
  presets: ['@babel/preset-env'],
}

4, hãy thêm phần sau

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

Lưu

module.exports = {
  presets: ['@babel/preset-env'],
}

5 của bạn và xem điều gì sẽ xảy ra

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

3 mà chúng tôi vừa cập nhật bằng cách nhập thông tin đầu vào của chúng tôi đã được hoàn nguyên về

module.exports = {
  presets: ['@babel/preset-env'],
}

6. Điều này là do trình duyệt thực sự làm mới và thẻ tập lệnh và trang được tải lại. Nói cách khác, chúng tôi không thể duy trì trạng thái ứng dụng của mình. Điều này có vẻ không phải là vấn đề lớn, nhưng khi bạn đang thử nghiệm ứng dụng của mình và thêm dữ liệu vào ứng dụng, sẽ rất khó chịu nếu ứng dụng của bạn "đặt lại" mỗi lần. May mắn thay, Webpack cung cấp cho chúng tôi một giải pháp gọi là Thay thế mô-đun nóng

Thay thế hot module là một plugin do chính Webpack cung cấp. Cho đến thời điểm này, chúng tôi chưa sử dụng chính đối tượng Webpack trong tệp cấu hình của mình. Tuy nhiên, bây giờ chúng tôi sẽ nhập Webpack để có thể truy cập plugin

Ngoài plugin, chúng tôi sẽ chuyển một tùy chọn bổ sung cho Webpack, tùy chọn

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

5. Trong tùy chọn đó, chúng tôi sẽ đặt

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

6 thành

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

7. Ngoài ra, chúng tôi sẽ thực hiện cập nhật (tùy chọn) cho quy trình xây dựng của mình. Chúng tôi sẽ tự động mở cửa sổ trình duyệt khi chúng tôi chạy

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

5. Chúng tôi thực hiện việc này bằng cách đặt

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

9 thành

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

7 cũng nằm trong tùy chọn

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

5

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

a11-webpack. cấu hình. js

Lưu ý rằng chúng tôi đã nhập Webpack để có thể truy cập vào


{
  "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": {}
}

2. Chúng tôi đã thêm nó vào mảng


{
  "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": {}
}

3, sau đó yêu cầu Webpack sử dụng nó với


{
  "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": {}
}

4. Chúng tôi tự động mở cửa sổ trình duyệt khi phục vụ ứng dụng với


{
  "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": {}
}

5

Chạy

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

5

Cửa sổ trình duyệt sẽ mở ra và nếu bạn mở công cụ dành cho nhà phát triển của mình, bạn sẽ nhận thấy một chút thay đổi trong đầu ra. Bây giờ nó cho chúng tôi biết chức năng thay thế mô-đun nóng đã được bật. Hãy nhập thông tin đầu vào của chúng ta để thay đổi nội dung

module.exports = {
  presets: ['@babel/preset-env'],
}

4. Sau đó, thay đổi thẻ


{
  "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": {}
}

8 để đọc.


{
  "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": {}
}

9

Lưu tệp của bạn và chú ý điều gì sẽ xảy ra

Trình duyệt không làm mới, nhưng thay đổi

0của chúng tôi được phản ánh. Thông báo chúng tôi đã nhập vào đầu vào vẫn còn, nhưng bản cập nhật


{
  "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": {}
}

8. Điều này cho phép ứng dụng của chúng tôi giữ trạng thái của nó trong khi chúng tôi chỉnh sửa nó

Bước 7. Xây dựng dự án của chúng tôi

Cho đến nay, chúng tôi đã phục vụ ứng dụng của mình. Nhưng, nếu chúng ta muốn xây dựng ứng dụng của mình để có thể phân phối nó thì sao?

Nếu bạn để ý, khi chúng tôi phục vụ ứng dụng của mình, không có tệp nào được tạo. Webpack tạo một phiên bản của các tệp này chỉ tồn tại trong bộ nhớ tạm thời. Nếu chúng tôi muốn phân phối ứng dụng Hello World của mình cho khách hàng của mình, chúng tôi cần xây dựng dự án

Điều này rất đơn giản. Giống như trước đây, chúng tôi sẽ tạo một tập lệnh trong gói của mình. json để báo cho Webpack xây dựng dự án của chúng ta. Chúng tôi sẽ sử dụng

2 làm lệnh thay vì

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

1. Chúng tôi cũng sẽ vượt qua lá cờ

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

8

Trước tiên, chúng tôi cũng sẽ sử dụng gói

5 để xóa mọi bản dựng trước đó mà chúng tôi có thể có. Chúng tôi làm điều này đơn giản bằng cách

6

7 là thư mục mà Webpack sẽ tự động tạo khi xây dựng dự án của chúng ta. "Dist" là viết tắt của phân phối-i. e. chúng tôi đang “phân phối” mã ứng dụng của mình

Lệnh

6 yêu cầu gói

5 xóa thư mục

6. Hãy chắc chắn rằng bạn không vô tình

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

1

Webpack cũng cung cấp một plugin sẽ hoàn thành quá trình dọn dẹp này có tên là

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

2. Tôi đã chọn

6 hiển thị một cách thay thế

gói của chúng tôi. tệp json sẽ trông như thế này

{
  "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": {}
}

a11-gói. json

Có ba điều cần chú ý

Tôi đã tạo một tập lệnh

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

4 riêng biệt để chúng tôi có thể chạy nó độc lập với tập lệnh xây dựng của mình

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

5 sẽ gọi tập lệnh độc lập

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

4 mà chúng tôi đã tạo

Tôi có

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

7 trong khoảng thời gian từ

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

8 đến

2. hướng dẫn này nói. “chạy

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

8 trước, sau đó chạy

2”

Hãy xây dựng dự án

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

5

Webpack tạo một thư mục

6 và mã của chúng tôi nằm bên trong. Vì mã của chúng tôi không yêu cầu HTTP, nên chúng tôi chỉ cần mở tệp

{
  "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": {}
}

4 trong trình duyệt của mình và nó sẽ hoạt động như mong đợi

Nếu chúng tôi có mã đang thực hiện các yêu cầu HTTP, thì chúng tôi sẽ gặp phải một số lỗi liên kết nguồn gốc khi chúng tôi thực hiện các yêu cầu đó. Chúng tôi sẽ cần chạy dự án đó từ một máy chủ để nó hoạt động

Hãy kiểm tra

{
  "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": {}
}

4 mà Webpack đã tạo trong trình duyệt và trình chỉnh sửa mã

R

Nếu chúng tôi mở nó trong trình chỉnh sửa của mình hoặc xem mã nguồn trong các công cụ dành cho nhà phát triển của chúng tôi, bạn sẽ thấy Webpack đã thêm thẻ script. Tuy nhiên, trong trình chỉnh sửa của chúng tôi, bạn sẽ không thấy các kiểu vì thẻ kiểu được thêm động vào thời gian chạy bằng JavaScript

Ngoài ra, lưu ý rằng thông tin bảng điều khiển phát triển của chúng tôi không còn nữa. Điều này là do chúng tôi đã chuyển cờ

{
  "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": {}
}

6 cho Webpack

Phần kết luận

Hiểu quy trình xây dựng đằng sau các khung bạn sử dụng sẽ giúp bạn hiểu rõ hơn về chính khung đó. Hãy dành chút thời gian để cố gắng xây dựng một Dự án Angular, React hoặc Vue khác mà không cần sử dụng CLI tương ứng. Hoặc, chỉ cần xây dựng một trang web ba tệp cơ bản (chỉ mục. html, phong cách. css và ứng dụng. js), nhưng sử dụng Webpack để phân phát và xây dựng phiên bản sản xuất

Cảm ơn vì đã đọc

woz

QUẢNG CÁO

Brandon Wozniewicz

Đọc thêm bài viết

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm với tư cách là nhà phát triển. Bắt đầu

Vue có sử dụng HTML và CSS không?

Vue (phát âm là /vjuː/, like view) là một khung JavaScript để xây dựng giao diện người dùng. Nó được xây dựng dựa trên HTML, CSS và JavaScript tiêu chuẩn và cung cấp mô hình lập trình dựa trên thành phần và khai báo giúp bạn phát triển giao diện người dùng một cách hiệu quả, có thể là .

Vue có biên dịch không?

Mô-đun vue-template-compiler là một công cụ mạnh mẽ để biên dịch các mẫu Vue và các thành phần tệp đơn lẻ thành JavaScript . Hầu hết các nhà phát triển không sử dụng trực tiếp vue-template-compiler. Nhưng các công cụ đóng gói như vue-loader cho Webpack sử dụng trình biên dịch vue-template để thực hiện việc biên dịch thực sự nặng nhọc.

Tôi có thể xây dựng một trang web với Vue không?

Tôi đã có thể lập trình toàn bộ trang web chỉ trong vài giờ từ đầu . Tôi đã nhận ra nơi JavaScript đang phát huy tác dụng và toàn bộ trải nghiệm rất thú vị. Tôi chắc chắn sẽ hoàn thành khóa học Vue dành cho người mới bắt đầu. Bạn có thể tìm thấy tất cả mã tôi đã tạo cho trang web trong repo GitHub của tôi.

Làm cách nào để biên dịch mã Vue JavaScript?

Dự án. Xây dựng ứng dụng Hello World Vue bằng các thành phần tệp đơn. .

Bước 1. Tạo cấu trúc dự án. .

Bước 2. Cài đặt các phụ thuộc. .

Bước 3. Tạo các tệp (Ngoại trừ tệp cấu hình Webpack của chúng tôi). .

Bước 4. Hướng dẫn Webpack phải làm gì. .

Bước 5. Thiết lập gói của chúng tôi. .

Bước 7. Xây dựng dự án của chúng tôi

programming html

Vue có biên dịch thành html không?

Webpack là gì?

Webpack và Vue

Dự án. Xây dựng ứng dụng Hello World Vue bằng các thành phần tệp đơn

Bước 1. Tạo cấu trúc dự án

Bước 2. Cài đặt các phụ thuộc

Bước 3. Tạo các tệp (Ngoại trừ tệp cấu hình Webpack của chúng tôi)

Bước 4. Hướng dẫn Webpack phải làm gì

Bước 5. Thiết lập gói của chúng tôi. json để chúng tôi có thể chạy Webpack

{{ message }}

{{ message }}

Bước 7. Xây dựng dự án của chúng tôi

{{ message }}

{{ message }}

{{ message }}

{{ message }}

{{ message }}

{{ message }}

{{ message }}

{{ message }}

Phần kết luận

Vue có sử dụng HTML và CSS không?

Vue có biên dịch không?

Tôi có thể xây dựng một trang web với Vue không?

Làm cách nào để biên dịch mã Vue JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội