多语言展示
当前在线:1493今日阅读:168今日分享:49

如何搭建vue项目

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),详细如下图

注意事项

希望对你有帮助

推荐信息