一、简介
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配置等
网友评论