# Monaco代码编辑器 > 由于该代码编辑器文件体积较大，目前采用CDN方式引入，详见`index.html` ### 不使用CDN引入 * `cnpm/npm i monaco-editor -S` * `cnpm/npm i monaco-editor-webpack-plugin -D` * 配置插件`vue.config.js`中添加 ~~~ const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') module.exports = { ... plugins: [ new MonacoWebpackPlugin({ // 更多选择见文档 https://github.com/Microsoft/monaco-editor-webpack-plugin#options languages: ['javascript', 'css', 'html', 'typescript', 'json'] }) ] } } ~~~ * 使用 ~~~ <template> <div> <div ref="monaco" style="width: 100%; height: 500px"></div> </div> </template> <script> import * as monaco from "monaco-editor"; export default { data() { return { monacoEditor: null, }; }, methods: { init() { this.monacoEditor = monaco.editor.create(this.$refs.monaco, { value: "function hello() {\n\talert('Hello world!');\n}", language: "javascript", theme: "vs-dark", }); }, }, mounted() { this.init(); }, }; </script> ~~~