Vue-Cli - Vue 脚手架的创建以及目录结构说明

柔情只为你懂 2024-02-21 09:44 44阅读 0赞

**目录**

一、Vue-Cli

1.1、Vue 脚手架的创建

二、Vue 脚手架目录结构说明

1.1、vscode 使用 Vue 脚手架

1.2、结构说明

--------------------

## 一、Vue-Cli ##

--------------------

### 1.1、Vue 脚手架的创建 ###

> 注意：你要提前安装好 node.js （官网下载即可），配置好环境变量.

a）以**管理员的方式**打开命令窗口，切换到你要创建项目的目录，输入如下命令（这里以构建名字为 "hello" 的 vue 脚手架为例）

vue init webpack 项目名称

首先会问你项目名称是否要叫 hello，直接回车就可以.

![612df130410042f99aaf4c30c7af5a54.png][]

b）接下来会问你项目描述是否叫（默认）："A Vue.js project". 如果不想改，直接回车即可.

![dedb255bdca949dea154bca447a436af.png][]

c）如果你设置了 git ，他会问你是否使用当前作者.

![fb5023f9569141dcb3cfcb2c7b1dc88a.png][]

d）接下来会问你，是否采用运行 + 编译的方式，实际上就是是否要热部署的意思，直接回车即可.

![7187f4d1819144088dba809bf124a437.png][]

e）接下来会问你是否要安装 vue-router. vue 路由项目中肯定是需要的，因此输入 y 回车即可.

![45b8b4aa79f347adb4425186abc2daf1.png][]

> Ps：从这之后，全部输入 n 回车即可（后米都用不上了）.

f）这个问你是否进行单词校验，校验出错会有红色波浪线. 这里不需要，因为你可能会写很多特殊字符，因此输入 n 回车即可.

![c4791536ed254df38c8d63ac96e979ce.png][]

g）接下来的两个询问都会问你是要使用测试，这里不需要，都输入输入 n 回车即可.

![441d1e81dd7c437290c5f4451b05a7ed.png][]

h）接下来问你是否要使用 npm 来管理项目，这个肯定是需要的，直接回车即可.

![2603f102afbd49ea986d7b6083aedabc.png][]

之后他就会去构建项目了，如果此时出现了如下错误，说明你权限不够，要使用管理员的方式打开命令行，再执行上述步骤.

![c12f0e49008849b7af5e540b4f02e9d5.png][]

i）出现以下提示，就说明构建完成了 ![55f2d82db5334aef957a2a605a61567f.png][]

他告诉你使用 cd hello 进入项目目录，然后使用 npm run dev 命令启动项目，以下可以看到启动成功了，使用IP和端口号是: localhost:8080

![faa87edea4c14e2986d4c8a073d83351.png][]

在浏览器中输入ip 和 port ，如下图表示成功：

![603d4bf6a61646c5b194e36073624d77.png][]

> Ps：以上构建，也可以在 vscode 中的 cmd 窗口构建.

## 二、Vue 脚手架目录结构说明 ##

--------------------

### 1.1、vscode 使用 Vue 脚手架 ###

这里推荐下载以下插件

![2109d4f94c274ebc8ba7ccf155328ae2.png][]

真的香！！！

### 1.2、结构说明 ###

进入 "hello" 项目，目录结构如下：

![68f8d90f7e2a489c86f2dd2f9d6a65ef.png][]

*  build 目录：存放对项目构建的配置，可以配置生产环境、测试环境... （使用默认就可）.
 *  config 目录：用来修改生产配置 和 测试配置核心目录（使用默认即可）
 *  node\_modules目录：用来存放当前项目中使用的 js 依赖. 类似于 maven 项目中存放 jar 包的仓库.
 *  **src目录：是我们开发人员需要重点关注的目录**
    
     *  **assets： 用来存放所有静态资源，例如 css、img、viedo、.mp3.......**
     *  **components： 标准开发中用来存放公共组件，另外会在 src 目录下在创建一个 views 目录，用来存放其他组件（组件名一般首字母大写）.** 
     *  **router： 用来配置项目中路由规则. 将来就可以在这个目录下的 index.js 中自定义路由规则.**
     *  **app.vue：vue 后缀就表示这个文件是用来描述一个组件的. 此处表示根组件，这里就是对跟组件的描述，例如组件的 html 代码（对应 template ）、在 script 中可以对跟组件添加 data、methods、components...、以及 html 代码的样式.**
     *  **main.js： 入口 js，这里就对应之前我们没有使用脚手架时，自己 new 的 Vue 实例，进行了解耦.（Vue 实例中的 components 就是引入的 app.vue 这个组件）.**
 *  static：用来存放静态资源，但是现在的开发习惯已经不再使用这个目录，而是被 src/assets 取代.
 *  .babelrc 、.editorconfig、.postcssrc.js：是隐藏文件，用来将 es6 语法打包成 es5（很多浏览器只支持 es5 语法）.
 *  index.html：当前项目的唯一页面. 这个页面无需做任何修改，打包以后就是一张 index.html
 *  package.json：用来管理当前项目中使用的依赖，类似于 pom.xml.

> 如何添加依赖？

例如我们需要下载 axios 依赖.

a）在 vscode 中通过 ctrl + \` 打开终端

![172b0ce76dda4182bed7953e44bf6dae.png][]

b）切换到 cmd 窗口

![06c992abb56b4707aa2a6b85598e9732.png][]

c）关闭 vscode ，以管理员的方式打开 vscode，打开 cmd 窗口，输入 npm install axios 进行下载.

![490719ad4ba0469e8d5568fad640e013.png][]

![983d929a0ab0469f9f9e348ba31e0547.gif][]

[612df130410042f99aaf4c30c7af5a54.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/7e30b122b6e84ea198f88d63d5291578.png
[dedb255bdca949dea154bca447a436af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/1bd43457b34240d4b84db57e18ac3388.png
[fb5023f9569141dcb3cfcb2c7b1dc88a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/c19ab71e233f4c58b8eeaa9ccc3dce3d.png
[7187f4d1819144088dba809bf124a437.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/e769bad90ee74dda9e44f1c52463c741.png
[45b8b4aa79f347adb4425186abc2daf1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/bb93f4c4ac26447c9f0e9264650ab9bd.png
[c4791536ed254df38c8d63ac96e979ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/b94a205cdc5a484989714c8f43dbadde.png
[441d1e81dd7c437290c5f4451b05a7ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/f0c26605279f43b892de2f8b2f5a7437.png
[2603f102afbd49ea986d7b6083aedabc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/c8e8f912191c4c43b2b1618c027b57ea.png
[c12f0e49008849b7af5e540b4f02e9d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/5b0368a63c9c4bd1ba9656b582875ef3.png
[55f2d82db5334aef957a2a605a61567f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/f144aeb54c7e4e26a1d42a5fdf817cbc.png
[faa87edea4c14e2986d4c8a073d83351.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/46235a534fae4924ba098653e6ad1e80.png
[603d4bf6a61646c5b194e36073624d77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/30b8f6f70e5b4fa1aed7007b2598c1c9.png
[2109d4f94c274ebc8ba7ccf155328ae2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/58cc2560577a4c419c35ee9c46b61ac5.png
[68f8d90f7e2a489c86f2dd2f9d6a65ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/3f2f38fbec5644a59cd7fa3bc0a6f190.png
[172b0ce76dda4182bed7953e44bf6dae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/e486b47f84844ad79ecf813d846774e7.png
[06c992abb56b4707aa2a6b85598e9732.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/40e6d21cc7e44801a6e45d54c397635c.png
[490719ad4ba0469e8d5568fad640e013.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/96083be2fe994e5cbea6516421a2f5b0.png
[983d929a0ab0469f9f9e348ba31e0547.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/cbb5a4b36003467d923a5d8b22a9abe7.png