脚本宝典收集整理的这篇文章主要介绍了

如何使用vue和webpack搭建项目

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

1.首先新建一个文件夹,用vscode打开该文件夹
2.进入终端

clipboard.png

3.使用npm install -g vue-cli安装vue-cli

clipboard.png

4.使用vue init webpack my-project系统会帮我们创建一个my-project文件夹并初始化包括安装相关的依赖,非常的方便
这里面有一个巨坑,总是会安装失败,提示Please try running this command again as root/Administrator.

clipboard.png

5.我开始在vscode里面打开终端,一直提示没有权限报错,解决方法是以管理员的身份打开cmd终端,然后再使用npm cache clean -f清除缓存

clipboard.png

6.再次运行vue init webpack my-project就成功能安装成功啦!

安装成功会按照提示进入文件夹,走起~

clipboard.png

7.在浏览器打开以下网址

clipboard.png

访问成功

clipboard.png

8.更改我们的网址,可以localhost改成我们的IP地址,修改端口号等

clipboard.png

注意!修改端口个IP地址等配置文件一定要重新运行配置才能生效
在命令行中Ctrl+C

clipboard.png

确认后输入npm run dev即可

你可以安装自己需要的UI框架,我以安装elementUI为例
1.运行npm i element-ui -S

clipboard.png

打开package.json文件发现elementUI已经安装好了

clipboard.png

打开main.js文件配置如下

这个样子完成了项目的初始化,我们就可以在src目录下开始我们编辑我们的项目了
clipboard.png

关于elementUI组件的使用和自定义主题配色可以看官方文档
http://element-cn.eleme.io/2....

总结

以上是脚本宝典为你收集整理的

如何使用vue和webpack搭建项目

全部内容,希望文章能够帮你解决

如何使用vue和webpack搭建项目

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过