如何创建简易 按需引入的Element组件的Vue项目

365 阅读2分钟

1.创建简易的vue项目

我在这里用的是VScode创建的项目

1.打开终端输入命令 vue create 项目名

QQ图片20210425091210.png

根据图中所指示的选择最后一个自定义模板

2.选择自己需要的模板内容 以下是我本人常用的模板内用的选择情况

QQ图片20210425091747.png

这里的选择是上下按钮控制选择第几个,空格按钮控制选中不选中

3.然后这里提示的是是否使用history模式的路由 本人一般选择的是不使用,系统会自动使用hash路由 history和hash不懂的可以去看一下history与hash区别

QQ图片20210425091217.png 4.这里是选择css代码的语法 我自己一般使用的是dart-sass语法 我认为这个语法比较好用你们也可以选择自己想用的datr-sass官网

QQ图片20210425091221.png

5.这里是让自己创建的一些node包 是在packjson文件中还是单独的我一般是单独拎出来

QQ图片20210425091224.png

6.这里提示得是 是否保存当前模板 根据自己需要选择是否

QQ图片20210425091229.png

2.创建element组件

1.在刚才创建的vuedemo文中的目录下打开终端输入命令

QQ图片20210425091233.png

2.下面这句话的意思是你需要怎么样引入element组件,第一个选择是全面引入,第二个是按需引入我推荐的是按需引入因为文件会更小一点,性能要好

QQ图片20210425091237.png

3.请选择你想到的语言 在这里我一般是选择第一个

QQ图片20210425091247.png

然后经过这两步文件就有了 现在我来说一下如何去验证

1.打开自己的vuedemo文件查看自己是否有我图中所指的文件夹 如果有就说明创建成功了

QQ图片20210425091251.png

2.你可以在这里引入自几想要的组件名称 具体的组件名称可以查element官网里边的快速上手里边都有选择自己需要的引入就好了

QQ图片20210425091322.png

引入可以多个一起引入,但是必须每个单独使用Vue.use