Vue学习笔记一：Vue基础环境搭建及相关文件说明

最新推荐文章于 2022-07-29 23:48:06 发布

爱睡懒觉的老舅

最新推荐文章于 2022-07-29 23:48:06 发布

阅读量491

点赞数 3

分类专栏：前端 Vue 文章标签： Vue 前端

本文链接：https://blog.csdn.net/Ocean111best/article/details/103495327

版权

前端同时被 2 个专栏收录

19 篇文章 17 订阅

订阅专栏

Vue

16 篇文章 1 订阅

订阅专栏

一、前言说明

去年有个项目有用到 Vue，当时太忙一直没有总结。今年下半年再次使用 Vue 时竟有些生疏，故还是写成博客记录之，以便日后再来看时能迅速记起。

首先要安装 webpack、nodejs。npm 是 node 的包管理工具，其服务器在国外，有时候安装依赖会很慢，可以安装 cnpm（淘宝的 npm 镜像），其安装步骤为：（1）cmd 下直接安装：npm install -g cnpm --registry=https://registry.npm.taobao.org （2）cmd 下：cnpm -v 查看 cnpm 的版本号，若出现版本号，则代表安装成功。

二、Vue-cli 安装

首先安装 Vue 的脚手架工具 Vue-cli，安装完此脚手架之后才能在创建项目时直接添加上 Vue 的依赖和配置。

直接 cmd 下面输入：npm install -g vue-cli （其中 -g 表示全局安装，在任意文件夹下都可在 cmd 或 terminal 控制台下面输入 vue 就可查看 vue 的基本信息，去掉 -g 表示在当前目录下安装）。安装完成后，在 cmd 下输入 vue 有如图所示结果：

三、创建 Vue+Webpack 项目

（1）本人是直接在 IDEA 里面的 Terminal(通过View-Tool Windows-Terminal调出来控制台)里面创建项目的(在 WebStorm 里面创建操作一样)。直接进入某个文件夹下，输入：

vue init webpack testDemo

则控制台上出现很多需要确定的地方，如文件名、文件描述等等，其中文件名不能输入大写(这里输入 testdemo，但是文件夹名称会跟我们输入 vue init webpack testDemo 中的 testDemo 一样)，第六项中的 ESLint 可以选择 No(因为 eslint 插件是语法检查工具，但是检查特别严格，一般不需要这么严格，可以选择不安装)，其他可以直接回车或者输入 Yes 即可：

正常这样安装时即可成功创建 Vue 项目 testDemo。博主创建时，虽创建成功，但 Terminal 有报错信息：

根据第一句提示，这个是因为超过最大调用堆栈大小了，这个是 npm 版本的问题，可以更新 npm：npm install npm -g 或者使用淘宝镜像命令更新：cnpm install npm -g ，一般出现虽然出现这个问题，但是也是创建成功的。

（2）安装依赖

进入 testDemo 目录下，输入：npm install（缩写是 npm i）即可安装依赖：

这个里面安装的依赖包都是根据 webpack 的包管理文件（package.json）里面的 devDependencies 文件：

webpack 配置相关说明参加此博客：https://blog.csdn.net/Ocean111best/article/details/103438917

依赖完成后，在根目录下生成 node_modules 文件夹，里面存放的是依赖包和插件等文件。

四、各个相关文件说明

项目创建成功及依赖安装完成之后，项目文件如下图所示：

下面简要说明各个文件夹及里面的文件。

1、build 文件夹

build 文件夹里面存放的是 webpack 的基本配置、开发环境配置、生产环境配置等。

其中最重要的是 webpack.base.conf.js 文件，如可定义入口文件，可定义插件处理文件，如新增加的依赖也可以放到这里面，类似于 webpack 项目中的 webpack.config.js 文件，如下图所示：

2、config 文件夹

config 文件夹主要配置路径端口，访问地址等，如 index.js 文件里面，可以修改 host 为 0.0.0.0 ，则可以根据 ip 或者 localhost 即可访问项目，修改 port 的值，改为任意的端口都可以：

3、node_modules 文件夹

npm install 安装的依赖或者插件都是存放在这个文件夹下

4、src 文件夹

src 文件夹存放组件及入口文件等，平常增加修改的组件都是存放在这个文件夹下。

（1）asserts 文件夹主要存放的是图片、css 等静态文件；

（2）components 文件夹主要存放的是组件，如本次项目只存放了 HelloWorld 一个组件，Vue 的基础知识可以查看相关文档学习；

（3）router 文件夹存放的是路由相关的文件，如点击哪个按钮，应该跳到哪个组件，可以在文件 index.js 中设置。

index.js 文件首先导入 Vue 模块，引入 vue-router 插件，还有 HelloWorld 组件。export default 主要是配置访问地址路由的，当地址为“/”的时候，就显示 HelloWorld 组件。一般后面我们运行时，默认打开的是 http://localhost:8080/#/，# 号是自动加上的，最后面那个斜杠，就是根据 path 中对应 '/' 匹配的组件 HelloWorld，且下面 App.vue 组件中的 <router-view> 则会自动匹配上 HelloWorld 组件。