Vue-cli 搭建项目

最新推荐文章于 2024-09-23 23:21:14 发布

毕竟你胡总

最新推荐文章于 2024-09-23 23:21:14 发布

阅读量427

点赞数

分类专栏：服务计算

本文链接：https://blog.csdn.net/qq_43267773/article/details/110493819

版权

服务计算专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

Vue-cli 搭建项目

Vue-cli 搭建项目

前言

本人近期的课堂作业中有需要用到前端 vue-cli 框架进行实验的，因为该环境配置比较复杂，所以在此记录一下，希望帮助到需要的人。

环境配置

0. 操作系统

本人的操作系统环境是：MAC OS

(操作系统不同配置的过程可能会略有不同，但是大部分的流程还是固定的)

1. 安装 node

开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载链接：https://nodejs.org/en/，

安装完成之后，打开cmd开始输入命令。

2. 查看 node 的版本号

下载好node之后，以管理员身份打开cmd管理工具，输入node -v ，回车，查看node版本号，出现版本号则说明安装成功。

3. 淘宝镜像安装

安装淘宝镜像的原因：后续项目的创建和依赖的安装速度会更快

在终端输入命令：

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

安装成功后在命令行输入：cnpm -v 进行查看是否安装成功

在这里插入图片描述

出现以上信息即为安装成功

4. 安装全局 vue-cli 脚手架

淘宝镜像安装成功之后，我们就可以全局 vue-cli 脚手架，输入命令：npm install --global vue-cli 回车；验证是否安装成功，在命令输入 vue，出来 vue 的信息，及说明安装成功；

5. 新建一个项目

搭建完手脚架之后，我们要开始建一个新项目，这个时候我建议，尽量不要装在C盘(windows 的用户)，因为 vue 下载下来的文件比较大，如果要改盘的话，直接输入D：回车就可以直接改盘

输入命令：vue init webpack my-project-first

回车，my-project-first 是我自己的文件夹的名字，是基于 webpack 的项目，输入之后就一直回车，直到出现是否要安装 vue-route，

后续的提示信息按照我给出的答案进行回答，即可成功构建项目：

创建完成之后的提示：

到安装的目录下进行查看，就会发现多了一个刚刚创建的文件夹：

在这里插入图片描述

6. 进入项目文件夹

文件夹已经下载好了，现在就可以进入文件夹，输入： cd my-project-first 回车进入新建的项目。（或选中项目文件夹，按住 shift+鼠标右键，选中在此处打开 PowerShell）

7. 在项目里安装依赖

因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，在项目里输入以下命令。

npm install（或cnpm install） cnpm为淘宝镜像，安装速度更快

8. 启动项目

一切环境依赖安装准备就绪，我们来测试一下自己新建的 vue 项目的运行情况，输入命令：cnpm run dev 直接回车。会弹出一个浏览器访问地址默认为localhost:8080。8080是默认的端口，要访问的话，直接在浏览器输入localhost:8080 就可以打开默认的模板了

通过浏览器打开这个网页即可看到项目的成果：

基础知识学习

本人基础知识多在菜鸟教程中学习，或者官网中进行学习，下面给出的链接也多是菜鸟驿站的链接

HTML5

菜鸟驿站：https://www.runoob.com/html/html-tutorial.html
CSS3

菜鸟驿站：https://www.runoob.com/css/css-tutorial.html
JS（JavaScript）

菜鸟驿站：https://www.runoob.com/js/js-tutorial.html
vue的全家桶（vue-cli构建工具，Vue的基本用法，router路由，axios请求接口，组件间传值，路由传参等）

菜鸟驿站：https://www.runoob.com/vue2/vue-tutorial.html

官网：https://cn.vuejs.org
基于VUE 的iview（主要用于管理端），Mint-UI（移动端）组件库

官网：https://www.iviewui.com/docs/introduce
webpack管理项目（配置管理打包）

菜鸟驿站：https://www.iviewui.com/docs/introduce

项目构架

简单介绍目录结构

build 目录是一些 webpack 的文件，配置参数什么的，一般不用动
config 是 vue 项目的基本配置文件
node_modules 是项目中安装的依赖模块
src 源码文件夹，基本上文件都应该放在这里。
assets 资源文件夹，里面放一些静态资源,图片和视频等
common 公用样式，JS 等
components 这里放的都是各个组件文件
lib->API 用于和后台交互的接口 JS
router 路由文件（页面跳转）
view 页面（各个子页面放在这文件夹下）
App.vue App.vue组件
main.js 入口文件
static 生成好的文件会放在这个目录下。
test 测试文件夹，测试都写在这里
.babelrc babel 编译参数，vue 开发需要 babel 编译
.editorconfig 看名字是编辑器配置文件，不晓得是哪款编辑器，没有使用过。
.gitignore用来过滤一些版本控制的文件，比如 node_modules 文件夹
index.html 主页
package.json 项目文件，记载着一些命令和依赖还有简要的项目描述信息
README.md 介绍自己这个项目的。

App.vue——[根组件]

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

【template】

其中模板只能包含一个父节点，也就是说顶层的 div 只能有一个

【script】

vue 通常用 es6 来写，用 export default 导出，其下面可以包含数据 data，生命周期(mounted 等)，方法(methods )等，具体语法请看 vue.js 文档

【style】

样式通过 style 标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加 scoped，<style scoped></style>

main.js——[入口文件]

main.js 主要是引入 vue 框架，根组件及路由设置，并且定义 vue 实例，下图中的

components:{App} 就是引入的根组件 App.vue

router——[路由配置]

router 文件夹下，有一个 index.js，即为路由配置文件

学习心得

本人算是零基础进行前端的学习，虽然要学的新的知识很多，但是认真学起来会发现，这些知识并不枯燥，尤其在菜鸟驿站学习的过程中，可以边学习边进行初步的实验操作和演示过程，这样能够使学习的过程更加有趣。在学习中也不必将所有的知识都清楚的掌握，因为在开发过程中，并不是所有的知识都需要运用到，可以大致看一下，知道具体的用法，并且知道有什么组件，各个组件有什么作用，在需要的时候直接上网查找文档就可以直接进行使用，非常方便。如果时间充裕的话，建议大家进行简单的笔记整理，这样也省去了上网查阅资料的时间，毕竟自己整理的笔记，是按照自己的逻辑来的，更加有条理。