vue-cli创建vue2项目代码全览:
一、步骤
需事先安装好npm、vue、vue-cli
- 在要创建的文件下打开cmd窗口,使用vue命令创建项目
vue create xxx
-
选择默认的配置,自行选择vue2还是vue3开发项目
-
然后去vsvode打开该项目去vue.config.js文件下配置项目基本信息
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 9999,//配置端口
open: true,//启动项目是否自动打开浏览器
https: false,//是否开启https协议
host: "localhost",//设置主机号
},
lintOnSave: false,//是否打开eslint代码检查
productionSourceMap: false, // 打包时, 不生成 .map 文件, 加快打包构建
});
- 在项目中打开终端下载element UI
npm i element-ui –S
- 入口文件 main.js 导入 element UI ,一共三步 如下代码
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import ElementUI from "element-ui"; //1、引入elementUI
import "element-ui/lib/theme-chalk/index.css"; //2、引入elementUI的css文件
Vue.use(ElementUI); //3、在vue实例里使用elementUI
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
- 为 vscode 安装 Element UI Snippets 插件,安装后敲代码会有智能提示。
💕 原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下
👍 点赞,你的认可是我创作的动力! \textcolor{orange}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!
⭐ 收藏,你的青睐是我努力的方向! \textcolor{red}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!
🥕 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!