{"id":23700,"date":"2024-05-20T17:24:19","date_gmt":"2024-05-20T09:24:19","guid":{"rendered":"https:\/\/www.yimenyun.cn\/emen\/?p=23700"},"modified":"2024-05-20T17:24:19","modified_gmt":"2024-05-20T09:24:19","slug":"vuejs-%e6%89%93%e5%8c%85-app%e6%93%8d%e4%bd%9c%e6%b5%81%e7%a8%8b%e4%bb%8b%e7%bb%8d","status":"publish","type":"post","link":"https:\/\/www.yimenyun.cn\/emen\/23700\/","title":{"rendered":"vuejs \u6253\u5305 app\u64cd\u4f5c\u6d41\u7a0b\u4ecb\u7ecd"},"content":{"rendered":"

Vue.js \u662f\u4e00\u4e2a\u9002\u7528\u4e8e\u6784\u5efa\u7528\u6237\u754c\u9762\u7684\u6e10\u8fdb\u5f0f\u6846\u67b6\uff0c\u5b83\u7684\u6838\u5fc3\u601d\u60f3\u662f\u5c06\u89c6\u56fe\u5c42\u4e0e\u6570\u636e\u5c42\u5206\u79bb\uff0c\u8ba9\u5f00\u53d1\u8005\u53ef\u4ee5\u66f4\u52a0\u4e13\u6ce8\u4e8e\u6570\u636e\u7684\u5904\u7406\u548c\u903b\u8f91\u7684<\/p>\n

<\/figure>\n<\/p>\n

\u5b9e\u73b0\u3002\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u901a\u5e38\u9700\u8981\u5c06 Vue.js \u5e94\u7528\u6253\u5305\u6210\u4e00\u4e2a\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u7684 app\uff0c\u672c\u6587\u5c06\u8be6\u7ec6\u4ecb\u7ecd Vue.js \u6253\u5305 app \u7684\u539f\u7406\u548c\u6b65\u9aa4\u3002<\/p>\n

\u4e00\u3001\u539f\u7406<\/p>\n

Vue.js \u7684\u6253\u5305 app \u4e3b\u8981\u662f\u901a\u8fc7 webpack \u8fdb\u884c\u5b9e\u73b0\u7684\u3002Webpack \u662f\u4e00\u4e2a\u6a21\u5757\u6253\u5305\u5de5\u5177\uff0c\u5b83\u53ef\u4ee5\u5c06\u5404\u79cd\u7c7b\u578b\u7684\u6587\u4ef6\uff08\u5982 JavaScript\u3001CSS\u3001\u56fe\u7247\u7b49\uff09\u6253\u5305\u6210\u4e00\u4e2a\u6216\u591a\u4e2a JavaScript \u6587\u4ef6\uff0c\u4ee5\u4fbf\u4e8e\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u3002Vue.js \u5e94\u7528\u7684\u6253\u5305\u8fc7\u7a0b\u4e3b\u8981\u5305\u62ec\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\uff1a<\/p>\n

1. \u901a\u8fc7 webpack \u7684\u5165\u53e3\u914d\u7f6e\u6587\u4ef6\uff08\u5982 index.js\uff09\u52a0\u8f7d Vue.js \u5e94\u7528\u7684\u5404\u4e2a\u6a21\u5757\u548c\u7ec4\u4ef6\u3002<\/p>\n

2. \u5bf9\u4e8e\u6bcf\u4e2a\u6a21\u5757\u548c\u7ec4\u4ef6\uff0cwebpack \u4f1a\u5c06\u5176\u8f6c\u6362\u6210\u4e00\u4e2a JavaScript \u51fd\u6570\uff0c\u5e76\u5c06\u5176\u6dfb\u52a0\u5230\u6253\u5305\u540e\u7684\u6587\u4ef6\u4e2d\u3002<\/p>\n

3. \u5728\u6253\u5305\u540e\u7684\u6587\u4ef6\u4e2d\uff0cwebpack \u8fd8\u4f1a\u6dfb\u52a0\u4e00\u4e9b\u8fd0\u884c\u65f6\u4ee3\u7801\uff0c\u7528\u4e8e\u5b9e\u73b0 Vue.js \u5e94\u7528\u7684\u5404\u79cd\u529f\u80fd\uff0c\u5982\u6570\u636e\u7ed1\u5b9a\u3001\u4e8b\u4ef6\u5904\u7406\u7b49\u3002<\/p>\n

4. \u6700\u540e\uff0cwebpack \u4f1a\u5c06\u6253\u5305\u540e\u7684\u6587\u4ef6\u4f18\u5316\u548c\u538b\u7f29\uff0c\u4ee5\u4fbf\u4e8e\u5728\u6d4f\u89c8\u5668\u4e2d\u52a0\u8f7d\u548c\u8fd0\u884c\u3002<\/p>\n

\u4e8c\u3001\u6b65\u9aa4<\/p>\n

\u4e0b\u9762\u662f\u4e00\u4e9b\u5e38\u7528\u7684\u6b65\u9aa4\uff0c\u7528\u4e8e\u5c06 Vue.js \u5e94\u7528\u6253\u5305\u6210\u4e00\u4e2a\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u7684 app\u3002<\/p>\n

1. \u5b89\u88c5 webpack \u548c\u76f8\u5173\u63d2\u4ef6<\/p>\n

\u9996\u5148\uff0c\u9700\u8981\u5b89\u88c5 webpack \u548c\u76f8\u5173\u7684\u63d2\u4ef6\uff0c\u5982 vue-loader\u3001babel-loader \u7b49\u3002\u53ef\u4ee5\u4f7f\u7528 npm \u547d\u4ee4\u8fdb\u884c\u5b89\u88c5\uff1a<\/p>\n

“`<\/p>\n

npm install webpack webpack-cli vue-loader vue-template-compiler babel-loader @babel\/core @babel\/preset-env –save-dev<\/p>\n

“`<\/p>\n

2. \u914d\u7f6e webpack<\/p>\n

\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a webpack \u914d\u7f6e\u6587\u4ef6\uff08\u5982 webpack.config.js\uff09\uff0c\u5e76\u8fdb\u884c\u5982\u4e0b\u914d\u7f6e\uff1a<\/p>\n

“`<\/p>\n

const path = require(‘path’);<\/p>\n

const { VueLoaderPlugin } = require(‘vue-loader’);<\/p>\n

module.exports = {<\/p>\n

entry: ‘.\/src\/main.js’,<\/p>\n

output: {<\/p>\n

path: path.resolve(__dirname, ‘dist’),<\/p>\n

filename: ‘bundle.js’<\/p>\n

},<\/p>\n

module: {<\/p>\n

rules: [<\/p>\n

{<\/p>\n

test: \/\\.vue$\/,<\/p>\n

loader: ‘vue-loader’<\/p>\n

},<\/p>\n

{<\/p>\n

test: \/\\.js$\/,<\/p>\n

loader: ‘babel-loader’,<\/p>\n

exclude: \/node_modules\/<\/p>\n

}<\/p>\n

]<\/p>\n

},<\/p>\n

plugins: [<\/p>\n

new VueLoaderPlugin()<\/p>\n

]<\/p>\n

};<\/p>\n

“`<\/p>\n

\u5176\u4e2d\uff0centry \u8868\u793a\u5165\u53e3\u6587\u4ef6\uff0coutput \u8868\u793a\u8f93\u51fa\u6587\u4ef6\uff0cmodule.rules \u8868\u793a\u6a21\u5757\u8f6c\u6362\u89c4\u5219\uff0cplugins \u8868\u793a\u63d2\u4ef6\u914d\u7f6e\u3002<\/p>\n

3. \u521b\u5efa Vue.js \u5e94\u7528<\/p>\n

\u5728 src \u76eevue\u4e2dapp\u6846\u67b6<\/a>\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a main.js \u6587\u4ef6\uff0c\u5e76\u7f16\u5199\u5982\u4e0b\u4ee3\u7801\uff1a<\/p>\n

“`<\/p>\n

import Vue from ‘vue’;<\/p>\n

import App from ‘.\/App.vue’;<\/p>\n

new Vue({<\/p>\n

el: ‘#app’,<\/p>\n

render: h => h(App)<\/p>\n

});<\/p>\n

“`<\/p>\n

\u5176\u4e2d\uff0cApp.vue \u662f\u4e00\u4e2a Vue.js \u7ec4\u4ef6\uff0c\u7528\u4e8e\u6e32\u67d3\u5e94\u7528\u7684\u754c\u9762\u3002<\/p>\n

4. \u7f16\u5199\u7ec4\u4ef6\u4ee3\u7801<\/p>\n

\u5728 src \u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a App.vue \u6587\u4ef6\uff0c\u5e76\u7f16\u5199\u5982\u4e0b\u4ee3\u7801\uff1a<\/p>\n

“`<\/p>\n

\n

\n

Hello, {{ name }}!<\/p>\n