vue是当前最火的前端技术之一,本文将介绍怎么利用vue-cli工具快速搭建一个vue项目,适用于大部分前端架构,详细的操作步骤如下。
工具/原料
1
vue.js
2
html编辑器sublime_text
方法/步骤
1
第一步,为了方便进行代码编写和步骤说明,我们点击打开【html编辑器sublime_text】,详细如下图
2
第二步,首先我们全局安装vue-cli脚手架,打开命令提示符工具,然后输入命令【npm install vue-cli -g】,按回车键,,想要看安装是否成功,我们可以输入命令【vue list】查看详细如下图
3
第三步,安装好vue-cli以后,我们选择一个安装vue项目的位置,然后输入命令【vue init webpack vue0624】(vue0624是项目的名称),然后安装步骤安装就可以了,最后选择【Yes,use NPM】,不会的详细看下图,然后就会自动安装了,详细如下图
4
第四步,慢慢等待 【vue0624文件夹就会创建一个vue项目了】,详细如下图
5
第五步,安装完以后,我们在当前的命令提示符工具中输入【cd vue0624】,然后安装依赖包,命令如下【npm install】,详细如下图
6
第六步,安装好依赖包以后,我们运行命令【npm run dev】,就会把vue的项目跑起来,然后我们在浏览器中输入【http://localhost:8080】,就会看到项目运行起来了,详细如下图
7
最后总结一下:全局安装vue-cli(npm install vue-cli -g)-安装vue项目(vue init webpack vue0624)-进入项目路径-安装依赖包(npm install)-运行项目(npm run dev),详细如下图
注意事项
希望对你有帮助