【Vue】七、Vue-cli工程化开发

比眉伴天荒 2023-10-09 15:17 85阅读 0赞

#### 后端程序员的vue学习之路 ####

*  一、 Vue-cli
 *   *  安装Vue-cli
     *  1、安装node.js
     *  2、配置node.js环境变量
     *  3、 Npm仓库设置淘宝源
     *  4、全局安装 vue-cli
     *  5、创建vue应用程序
     *   *  1、 创建vue项目基础骨架：
         *  2、 运行项目：
     *  6、vue项目结构
 *  二、Vue.js项目运行逻辑分析
 *   *  1、 npm run dev命令
     *  2、webpack.dev.conf.js
     *  3、config/index.js
     *  4、webpack.base.conf.js
     *  5、main.js
     *  6、找到自定义组件App.vue
     *  7、流程分析总结
     *  关闭 eslint的验证，在config/index.js文件

## 一、 Vue-cli ##

Vue-cli是Vue.js 提供一个官方命令行工具，帮我们快速生成项目的原型，可用于快速搭建大型单页应用；

### 安装Vue-cli ###

### 1、安装node.js ###

下载：http://nodejs.cn/download/  
最新的版本，win7不能使用；  
v12.16.2以上版本不支持win7系统，要下载v12.16.2及之前的版本即可；  
安装：解压即完成安装；  
检查安装后的效果：

node -v 
    npm -v

新版的Node.js已自带npm，安装Node.js时就已经安装，npm的作用就是对Node.js依赖的包进行管理，可以理解为用来安装/卸载Node.js需要依赖的库；

### 2、配置node.js环境变量 ###

1、在 自己的node安装目录下创建两个文件夹，例如我的D:\\02\_JavaSoftware\\Node14.15.1下创建2个文件夹：

*  node\_global （依赖库）
 *  node\_cache （缓存）

2、然后再当前目录下cmd进入dos窗口，执行：

npm config set prefix "D:\02_JavaSoftware\Node14.15.1\node_global" 
    npm config set cache "D:\02_JavaSoftware\Node14.15.1\node_cache"

3、环境变量Path配置，在path变量中添加如下路径：

D:\02_JavaSoftware\Node14.15.1;D:\02_JavaSoftware\Node14.15.1\node_global;

4、在任意目录打开dos窗口测试下：

node -v
    npm -v

5、安装一个模块（依赖库）测试一下看看：

npm install express -g  #其中-g是全局安装的意思

全局安装就会把express模块安装到；  
D:\\02\_JavaSoftware\\Node14.15.1\\node\_global目录下，否则就会安装到了当前执行命令所在的目录下：C:\\Users\\Administrator

*  express是一个快速，无缺陷，极简的Web框架；

### 3、 Npm仓库设置淘宝源 ###

Npm仓库：https://www.npmjs.com/  
查看目前的npm仓库源：

npm config get registry

在使用npm命令时，如果直接从国外的仓库https://www.npmjs.com/ 下载依赖，下载速度很慢，甚至会下载失败，我们可以更换npm的仓库源，提高下载速度，淘宝给我们提供了一个npm源；

//设置淘宝源
    npm config set registry https://registry.npm.taobao.org
    
    或者安装cnpm，以后用cnpm命令也可以
    // 安装cnpm命令
    npm install -g cnpm --registry=https://registry.npm.taobao.org

最后可在c盘usr目录下查看.npmrc文件内容如下  
![在这里插入图片描述][576541f83b944b4e8b3521c5294b0859.png]

### 4、全局安装 vue-cli ###

$ `npm install -g @vue/cli`  
$ `npm i -g @vue/cli-init`  
如果安装失败可以先执行尝试清一下缓存：`npm cache clean –force` (清楚npm缓存)

### 5、创建vue应用程序 ###

![在这里插入图片描述][e00b3e991d79409e93bf158fb077c1d0.png]

#### 1、 创建vue项目基础骨架： ####

$ vue init webpack vue-project #这里需要进行一些配置，默认回车即可

其中vue-project是项目工程名称；  
![在这里插入图片描述][6b4047ff6aef4c8aacbd87264cf623a1.png]  
![在这里插入图片描述][3574cc78489545cabae8f58f4e0ed2b3.png]

#### 2、 运行项目： ####

进入项目，安装并运行：

$ cd vue-project
    $ npm install
    $ npm run dev

DONE Compiled successfully in 4388ms

> Listening at http://localhost:8081  
> 成功执行以上命令后访问 http://localhost:8081/ 输出结果；  
> ![在这里插入图片描述][0bf679ff6f704de297b9acb093622978.png]

### 6、vue项目结构 ###

![在这里插入图片描述][0a5b154c97c64ca7808ed08c23a23910.png]

<table> 
 <thead> 
  <tr> 
   <th>目录/文件</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>build</td> 
   <td align="left">项目构建(webpack)相关代码</td> 
  </tr> 
  <tr> 
   <td>config</td> 
   <td align="left">配置目录，包括端口号等;</td> 
  </tr> 
  <tr> 
   <td>node_modules</td> 
   <td align="left">npm 加载的项目依赖模块;</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td align="left">这里是要开发的目录，基本上要做的事情都在这个目录里,包含了几个目录及文件：<br><strong>assets</strong>: 放置一些图片，如logo等;<br> <strong>components</strong>: 目录里面放了一个组件文件，可以不用;<br><strong>router</strong> ：存放路由的文件夹<br> <strong>App.vue</strong>: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录;<br> <strong>main.js</strong>: 项目的核心文件;</td> 
  </tr> 
  <tr> 
   <td>static</td> 
   <td align="left">静态资源目录，如图片、字体等;</td> 
  </tr> 
  <tr> 
   <td>test</td> 
   <td align="left">初始测试目录，可删除;</td> 
  </tr> 
  <tr> 
   <td>.xxxx文件</td> 
   <td align="left">这些是一些配置文件，包括语法配置，git配置等;</td> 
  </tr> 
  <tr> 
   <td>index.html</td> 
   <td align="left">首页入口文件，你可以添加一些 meta 信息或统计代码啥的;</td> 
  </tr> 
  <tr> 
   <td>package.json</td> 
   <td align="left">项目配置文件;</td> 
  </tr> 
  <tr> 
   <td>README.md</td> 
   <td align="left">项目的说明文档，markdown 格式;</td> 
  </tr> 
 </tbody> 
</table>

根据模板生成的结构，其文档：  
[https://vuejs-templates.github.io/webpack/][https_vuejs-templates.github.io_webpack]

## 二、Vue.js项目运行逻辑分析 ##

### 1、 npm run dev命令 ###

![在这里插入图片描述][639633cf04be46e1a78baf606bba010c.png]

### 2、webpack.dev.conf.js ###

![在这里插入图片描述][cb45184966d146c88a43ff6bc6d1780a.png]

### 3、config/index.js ###

如果端口正在使用，则将确定一个空闲端口  
因为我有启动一个后端项目，所以这个前端的使用了8081  
![在这里插入图片描述][9d318c9afc7b4075b2c5a6888f828f35.png]

### 4、webpack.base.conf.js ###

![在这里插入图片描述][8ca0d8242e3a4d029fe241aa6f8b485b.png]

### 5、main.js ###

![在这里插入图片描述][2fede820602547c4917c2b34f2b4b691.png]

### 6、找到自定义组件App.vue ###

![在这里插入图片描述][6c1de302be7449cfa7c0ed15d7a52108.png]

### 7、流程分析总结 ###

*  1、启动 npm run dev

scripts": {
        
    "dev

*  2、 执行webpack.dev.conf.js

build/webpack.dev.conf.js

*  3、声明connfig下的静态js–配置端口

const config = require('../config') 
    index.js --> 配置端口

*  4、找到声明webpack.base.conf下的静态js-

const baseWebpackConfig = require('./webpack.base.conf')

*  5、找到main.js

entry: {
        
        app: './src/main.js'
      },

*  6、加载app组件![在这里插入图片描述][707253229172405da8a82d366f038c2a.png]

### 关闭 eslint的验证，在config/index.js文件 ###

module.exports = {
        
    dev: {
        
    useEslint: true,//改为false
    }
    }

[576541f83b944b4e8b3521c5294b0859.png]: https://img-blog.csdnimg.cn/576541f83b944b4e8b3521c5294b0859.png
[e00b3e991d79409e93bf158fb077c1d0.png]: https://img-blog.csdnimg.cn/e00b3e991d79409e93bf158fb077c1d0.png
[6b4047ff6aef4c8aacbd87264cf623a1.png]: https://img-blog.csdnimg.cn/6b4047ff6aef4c8aacbd87264cf623a1.png
[3574cc78489545cabae8f58f4e0ed2b3.png]: https://img-blog.csdnimg.cn/3574cc78489545cabae8f58f4e0ed2b3.png
[0bf679ff6f704de297b9acb093622978.png]: https://img-blog.csdnimg.cn/0bf679ff6f704de297b9acb093622978.png
[0a5b154c97c64ca7808ed08c23a23910.png]: https://img-blog.csdnimg.cn/0a5b154c97c64ca7808ed08c23a23910.png
[https_vuejs-templates.github.io_webpack]: https://vuejs-templates.github.io/webpack/
[639633cf04be46e1a78baf606bba010c.png]: https://img-blog.csdnimg.cn/639633cf04be46e1a78baf606bba010c.png
[cb45184966d146c88a43ff6bc6d1780a.png]: https://img-blog.csdnimg.cn/cb45184966d146c88a43ff6bc6d1780a.png
[9d318c9afc7b4075b2c5a6888f828f35.png]: https://img-blog.csdnimg.cn/9d318c9afc7b4075b2c5a6888f828f35.png
[8ca0d8242e3a4d029fe241aa6f8b485b.png]: https://img-blog.csdnimg.cn/8ca0d8242e3a4d029fe241aa6f8b485b.png
[2fede820602547c4917c2b34f2b4b691.png]: https://img-blog.csdnimg.cn/2fede820602547c4917c2b34f2b4b691.png
[6c1de302be7449cfa7c0ed15d7a52108.png]: https://img-blog.csdnimg.cn/6c1de302be7449cfa7c0ed15d7a52108.png
[707253229172405da8a82d366f038c2a.png]: https://img-blog.csdnimg.cn/707253229172405da8a82d366f038c2a.png