vue-cli -Vue.js 开发的标准工具

vue cli 官网: vue cli vue cli 中文网

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

  • 通过 @vue/cli 搭建交互式的项目脚手架。

  • 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

  • 一个运行时依赖 (@vue/cli-service),该依赖:

    • 可升级;

    • 基于 webpack 构建,并带有合理的默认配置;

    • 可以通过项目内的配置文件进行配置;

    • 可以通过插件进行扩展。

  • 一个丰富的官方插件集合,集成了前端生态中最好的工具。

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

创建一个新项目

vue create hello-world

也可使用图形化界面

vue ui

项目结构

- node_modules     依赖包

- public     静态资源文件夹 (最终打包的时候, webpack 会将这个文件夹里面除了 index.html之外的所有内容都复制到生成的 dist 目录下.)

    -favicon.ico     项目小图标

    -index.html     项目入口的模板

- src     项目资源文件夹 (里面存放的都是需要 webpack 打包的文件)

- .browserslistrc      里面所配置的浏览器的一个兼容配置

- .editorconfig    编辑器的配置文件

- .eslintrc.js     eslint 的配置文件

- .gitignore       git 忽略文件

- babel.config.js  babel的配置文件

- package-lock.json  项目描述文件的加锁

- package.json       项目描述文件

- postcss.config.js  postcss 配置文件

- README.md         读我的文件

项目启动

- 开发    

npm run serve

- 生成(上线)

npm run bulid

-lint(代码校验)

npm run lint
目前 脚手架 将 webpack 的配置都被集成进去了。我们一般是可以不用修改的。万一如果你硬要修改,可以通过配置 vue.config.js 的方式去修改


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论

精彩评论
Top

分享: