Vue CLI

作者: 杨健kimyeung | 来源:发表于2020-08-28 18:49 被阅读0次

一、简介

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

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

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

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

  • 可升级;

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

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

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

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

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

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注写应用,而不必花好几天去纠结配置的问题。

image

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="csharp" cid="n24" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// 进入该项目目录
cd smart-web
// 安装所需依赖
npm install
// 启动服务
npm run dev</pre>

二、目录介绍

1、build:构建脚本目录

  • build.js ==> 生产环境构建脚本;

  • check-versions.js ==> 检查npm,node.js版本;

  • utils.js ==> 构建相关工具方法;

  • vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀;

  • webpack.base.conf.js ==> webpack基本配置;

  • webpack.dev.conf.js ==> webpack开发环境配置;

  • webpack.prod.conf.js ==> webpack生产环境配置;

2、config:项目配置

  • dev.env.js ==> 开发环境变量;

  • index.js ==> 项目配置文件;

  • prod.env.js ==> 生产环境变量;

3、node_modules:

  • npm 加载的项目依赖模块

4、src

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

  • assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;

  • components:组件目录,我们写的组件就放在这个目录里面;

  • router:前端路由,我们需要配置的路由路径写在index.js里面;

  • App.vue:根组件;

  • main.js:入口js文件;

5、static

  • 静态资源目录,如图片、字体等。不会被webpack构建

6、index.html

首页入口文件,可以添加一些 meta 信息等

7、package.json

npm包配置文件,定义了项目的npm脚本,依赖包等信息``

8、README.md:

项目的说明文档,markdown 格式

9、.xxxx文件:

这些是一些配置文件,包括语法配置,git配置等

相关文章

网友评论

      本文标题:Vue CLI

      本文链接:https://www.haomeiwen.com/subject/wefrsktx.html