Vue 配置脚手架CLI 3及项目结构

前言:为什么使用CLI(command line interface)?

每次创建一个新的vue项目,都要下载webpack依赖包,创建文件目录以及各种东西,CLI是一个用于管理Vue项目的框架,用于项目代码的结构维护以及配置一条龙服务。

安装步骤:

  1. 安装前提
    Node环境要搭建好,默认下安装node自带npm

  2. 安装指令
    如果对单独一个项目安装,直接进入项目目录,然后
    npm install @vue/[email protected]
    如果要全局安装,直接win + R ,cmd,然后
    npm install @vue/cli -g

  3. CLI 3 使用
    用CLI脚手架,初始化一个项目,指令
    vue create projectName
    || CLI 2版本 : vue init webpack projectName
    注意:若使用CLI 2版本方式创建项目,则需安装另外的@vue/cli-init 包。

项目的目录结构

在这里插入图片描述
其中,build和config是webpack配置相关的js文件夹;
node-modules是依赖node的相关模块;
src是开发时写代码的地方;
static是在进行打包发行时,会连带着一起生成到/dist目录的资源;

.babelrc 是ES代码转化相关的配置
.editorconfig 是管理文本代码的配置,例如缩进,字体等
.eslintignore 是 管理js代码规范的,不遵守规范才写进去
.postcssrc.js是 css转化相关代码配置
package.josn 是记录项目安装的依赖包,大概的版本
package-lock.json 是实际项目的真实版本

注意:package.json里面,版本号是这样书写的 " ^13.0.0" ,这表示实际安装的版本,可能大于13.0.0,只能是大于13.0.x;如果版本号是"~13.0.0",那么可变范围是13.x.x;

猜你喜欢

转载自blog.csdn.net/weixin_42557786/article/details/114991288
今日推荐