vue搭建前端相关命令

时间:2023-03-09 08:48:11
vue搭建前端相关命令

Vue搭建、新建工程并打开浏览器调试的指令:

这四行命令就是我们接下来工作了。

1.npm install –global vue-cli
我们在安装好nodejs后就可以用到“npm”这个前缀指令,并且通过node这个“仓库”,我们以后可以通过命令行工具安装其他很多的东西如angular-cli等。这里的指令意思是“通过node 全局安装vue-cli”,安装的时间会比较长,耐心等待下~

PS:下载太慢的话可以把npm换成国内镜像:
npm config set registry https://registry.npm.taobao.org

vue搭建前端相关命令
通过node“仓库”安装vue-cli工具

如上,安装成功~

2.vue init webpack my-project
刚才我们通过node安装了vue-cli工具,vue-cli是vue的命令行工具,通过它我们可以新建我们第一个vue模板工程。这里的指令意思是:vue init [模板名] [新建的模板工程文件夹名称],“通过vue-cli新建webpack模板工程,名字为my-project”

新建工程的问题建议像如下去填:

vue搭建前端相关命令
新建Vue模板工程时询问的问题

3.cd my-project
进入到我们新建的my-project工程:可以看到命令行工具指向的当前路径改变了:

vue搭建前端相关命令
进入到刚刚新建的工程模板目录

4.npm run dev
运行工程,打开浏览器调试。(请不要关掉命令行工具)

vue搭建前端相关命令
image

5.打开浏览器调试

出现以上窗口,说明已在本地端口8080打开浏览器调试,我们在浏览器上地址栏输入并打开:localhost:8080

vue搭建前端相关命令
新建的工程模板

这就是Vue的工程模板页面了,大功告成!

作者:Tdata技术哥
链接:https://www.jianshu.com/p/c275414839dc
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。