首先確保安裝的nodejs是18版本以上
確保你安裝了最新版本的?Node.js，并且你的當(dāng)前工作目錄正是打算創(chuàng)建項(xiàng)目的目錄。在命令行中運(yùn)行以下命令
VSCode打開終端
輸入構(gòu)建項(xiàng)目命令，個(gè)人推薦如果有cnpm使用cnpm
npm create vue@latest
cnpm create vue@latest
創(chuàng)建成功之后
引入element依賴包
cnpm i element-ui -S
完整引入
在 main.js 中寫入以下內(nèi)容：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
以上代碼便完成了 Element 的引入。需要注意的是，樣式文件需要單獨(dú)引入。
按需引入
借助?babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。
首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
然后，將 .babelrc 修改為：文章來源：http://www.zghlxwxcb.cn/news/detail-784011.html
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
接下來，如果你只希望引入部分組件，比如 Button 和 Select，那么需要在 main.js 中寫入以下內(nèi)容：文章來源地址http://www.zghlxwxcb.cn/news/detail-784011.html
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或?qū)憺? * Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});到了這里，關(guān)于通過Vscode 簡單創(chuàng)建一個(gè)vue3+element的項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
