如何使用Vue CLI创建vue项目+项目目录介绍

1 初识Vue CLI

详见官网：https://cli.vuejs.org/guide/

2 安装Vue CLI

2.1 卸载

学安装之前，我们先学习如何卸载

npm uninstall vue-cli -g
#或者
yarn global remove vue-cli

2.2 安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.3 检查

# 可通过下列命令检查安装的脚手架的版本
vue --version
# 或者
vue -V

2.4 关于Vue CLI的版本：@vue/cli & vue/cli

• @vue/cli：是新版本
• vue/cli： 老版本

3 使用cli创建项目

3.1使用图形化界面

vue ui

3.2使用命令行，创建项目名为name的项目

vue create name

3.3 创建项目重点在，勾选什么，空格选择，回车确定

? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试

4 项目的目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-71EoxcNV-1620039526786)(00_使用Vue CLI创建vue项目.assets/image-20210503173450279.png)]

4.1 目录简介：

node_modules: 存放项目依赖的包
public: 内有index.html(唯一的HTML页面)，以及一个后缀未.ico的图片，配置该图片可以修改页面标签位置的图标
src: 项目的根路径
api: 存放前端封装的接口
components: 存放所有的组件
layout: 存放布局组件
router: 如果使用脚手架创建项目时，勾选路由，那么新创建的项目带有此文件，其下有index.js，负责管理组件之间的切换
utils: 存放自己封装的工具类
App.vue: 项目的根组件
main.js: 项目的入口js文件
.gitignore: 配置jit相关
babel.config.js: Babel的配置文件，
package.json: 记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）
package-lock.json: 记录了node_modules目录下所有模块的具体来源和版本号以及其他的信息。

4.2 部分详解

4.2.1 babel.config.js && Babel

详见官网： https://www.babeljs.cn/docs/index.html

• Babel 是一个 JavaScript 编译器

• Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

• babel.config.js是Babel的配置文件

4.2.2 package.json的配置

有位博主写的很详细，我借鉴一下。原文链接：https://blog.csdn.net/weixin_40817115/article/details/86611179

{
    "dependencies": {
        "foo": "1.0.0 - 2.9999.9999",   
        "bar": ">=1.0.2 <2.1.2",        必须大于等于1.0.2版本且小于2.1.2版本
        "baz": ">1.0.2 <=2.3.4",        必须大于1.0.2版本且小于等于2.3.4版本
        "boo": "2.3.1",                 必须匹配这个版本
        "boo": "~2.3.1",                约等于2.3.1，只更新最小版本，相当于2.3.X，即>=2.3.1 <2.4.0
        "thr": "2.3.x",
        "boo": "^2.3.1",                与2.3.1版本兼容，相当于2.X.X, 即>=2.3.1 < 3.0.0,不改变大版本号。
        "qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
        "asd": "http://asdf.com/asdf.tar.gz",   在版本上指定一个压缩包的url，当执行npm install 时这个压缩包会被下载并安装到本地。
        "til": "~1.2",   
        "elf": "~1.2.3", 
        "two": "2.x",
        "lat": "latest",             安装最新版本
        "dyl": "file:../dyl",         使用本地路径
        "adf": "git://github.com/user/project.git#commit-ish"    使用git URL加commit-ish
    }
}

": “file:…/dyl”, 使用本地路径
“adf”: “git://github.com/user/project.git#commit-ish” 使用git URL加commit-ish
}
}