欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > vue >内容正文

vue

vue-cli简单使用心得

发布时间:2023/12/31 vue 41 豆豆
生活随笔 收集整理的这篇文章主要介绍了 vue-cli简单使用心得 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

对于大型的项目,需要考虑项目结构,项目构建和部署,热加载,代码单元测试等事情,这个时候我们就需要使用脚手架工具方便开发。

环境:node npm


这里我们使用vue-cli来开发vue项目:

1-安装vue-cli

npm install -g vue-cli

2-初始化,构建一个webpack的项目

vue init webpack my-project

3-打开项目根目录

cd my-project

4-安装npm

npm install

5-启动项目

npm run dev

构建好后的目录结构如图:

启动的时候,npm run dev 然后在浏览器输入http://localhost:8080


这两讲解两个命令:

vue init <template-name></template-name><project-name>

template-name为模板名字,project-name为要生成的项目名字。

vue list

可以罗列出所有的可以使用的模板。

官方提供了很多模板

随便说几个:

Browserify ,simple,webpack,webpack-simple.............

如果官方模板不能满足:

vue init username/repo my-project

生成基于自己模板的项目

vue init ~/fs/path/to-custom-template my-project

总结

以上是生活随笔为你收集整理的vue-cli简单使用心得的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。