Vue框架学习记录【持续更新】-环境的搭建以及整个项目的文件关系

最新推荐文章于 2024-11-07 19:48:34 发布

南孚先生

最新推荐文章于 2024-11-07 19:48:34 发布

阅读量173

点赞数

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_43444767/article/details/104589682

版权

vue 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Vue从下载到环境的搭建

环境的搭建
- 需要下载的工具
- 搭建vue开发环境
整个项目的文件关系

环境的搭建

需要下载的工具

下载node.js，命令行输入以下内容：

brew install nodejs

sudo chmod -R 777 /usr/local/lib/node_modules/

安装淘宝镜像(因为利用国内的镜像下载工具，速度要比国外的npm快很多)

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

cnpm install webpack -g

安装vue脚手架

npm install vue-cli -g

搭建vue开发环境

在硬盘上创建一个文件夹，该文件夹是专门放vue工程的，并且在终端中进入该目录

cd 目录路径

根据模板创建项目

vue init webpack-simple 工程名字

会有一些初始化的设置，如下输入:
Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)
Project name (vue-test)直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字

cd 命令进入创建的工程目录路径
安装项目依赖

npm install

安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

启动项目
npm run dev
在atom（其他编译器也可以）打开该项目，然后通过编译器开始coding！～你的每一次修改的保存都会在上一步启动项目后产生的网页实时显示！

整个项目的文件关系

提出一个问题

在这里，相信大家总是会有疑惑，明明只想coding，为什么需要下载那么多工具？而且项目目录，为什么会多出那么多不认识的文件夹？比如下图
在这里插入图片描述
那么接下来就重点解释一下这些文件夹的作用，以及我们的vue项目，在运行指令npm run dev后是如何将这些文件组织起来形成一个浏览器可以解析的网页的。

vue cli

vue cli搭建的项目本质是一个集成预设置的webpack项目。是webpack驱动着项目的打包，热重载和本地运行。而上述问题都是由webpack逐一处理的。

Package.json

这是每个项目的配置文件，以json语法讲这个项目的所有配置都记录在了这个文件内。之前提到的运行项目，需要用到命令npm run dev。这个dev其实就是Package.json里面的一个配置信息。所以很多时候，你想运行在网上下载的vue项目，你常常需要点开他的package.json文件查看他的项目配置，然后根据他的配置信息来运行项目。

main.js是项目的入口文件

在vue cli构建的项目中，main.js是项目的入口文件，定义了vue实例，并引入根组件app.vue，将其挂载到index.html中id为‘app’的节点上。
在这里插入图片描述
main.js:

import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app', //挂载点
  components: { App }, // 根组件
  template: '<App/>'
})

index.html：

<body>
    <div id="app"></div>
  </body>

app.vue:

<template>
  <div id="app">
    .....
  </div>
</template>

webpack

我们的浏览器只认识html,css,js三种类型的文件，那我们在项目中写的vue类型的文件，浏览器是怎么解析并且显示的呢？
这里就需要了解我们之前下载的wevpack工具了：webpack 是JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，然后将应用程序所需的所有模块打包成一个或多个 bundle。
所以我们之前说的main.js是一个入口文件就可以理解了:在项目打包时，webpack会从main.js开始构建依赖图，梳理整个项目依赖且不重复的模块，这样我们的项目就可以从头到尾转换为浏览器可以解析的项目了。

webpack配置文件

vue cli 2 在build目录下默认有三种场景配置：webpack.base/dev/prod.conf.js
base是基础配置，dev/prod分别是开发和产品场景的配置。
在运行或打包时，会根据你的命令选择不同的配置文件。脚本配置是写在package.json中的，如npm run dev就是使用开发环境配置。

流程梳理

当你输入 npm run dev 后，发生了这样一连串事件——webpack选择了开发配置，并进入main.js入口文件，构建项目依赖图。webpack将整理后的所有依赖模块打包成输出文件app.js，接着htmlwebpackPlugin（webpack自带的一个插件）将它挂载到index.html页面上。