Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

发布时间：2022-08-14 文章分类：编程知识 投稿人：赵颖 字号： 默认 | 大 | 超大 打印

前言

本篇随笔主要写了Vue框架搭建项目时所用的vue官方项目模版，如何创建项目，建设项目结构和拉取项目模版。

作为自己对Vue框架搭建项目知识的总结与笔记。

百度网盘链接，案例源码获取地址：

链接：https://pan.baidu.com/s/1AB1gScU5SYtCgS3xnK3mIA?pwd=1234
提取码：1234

随笔目录结构：

PS: 点击标题后的 --> Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码） 这个标志可以浏览目录结构，以便快速定位需要的内容

一、准备工作

1。开发工具

最主要的是Node 8.12.0 版本，版本冲突最少，当然最好是8.12.0 版本，其他版本也可以，不过需要调试错误。

这里随笔基于Node 8.12.0 版本，可以无冲突安装，一路Next到最后运行。

1.1 VScode 任意版本即可

1.2 Node多版本管理工具gnvm （也可不装）

此工具是管理Node版本的，方便开发，谁用谁爽，前端工程师都知道它

建议安装，因为项目搭建需要更改node版本，以便与解决node和npm、webpack等工具的版本冲突，具体的安装步骤请参考如下博文：

Node多版本管理工具gnvm的安装：https://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html

1.3 Node 8.12.0 版本（未使用gnvm版本管理工具的，如有其他版本可能需要卸载掉，再安装8.12.0版本）

（1）如果参考上一步骤下载了gnvm,并且安装了Node 8.12.0 版本，可跳到下一步骤

Node多版本管理工具gnvm的安装：https://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html

（2）如果未安装Node多版本管理工具gnvm，可以直接从以下地址获取（推荐安装gnvm）：

百度网盘链接，node 8.12.0获取地址：

链接：https://pan.baidu.com/s/1I_Cxy5MSc77UFv4Ne4-zaw?pwd=1234
提取码：1234

2。案例分析

1.1 案例的src目录结构如下图所示。

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

二、搭建项目详解

1 。目录建设

在D盘目录下创建文件夹D:vuecode\test(这是我所创建文件夹所在路径 D:\allcode\classcode\vuecode\testcode\test1) 如下图：

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

2 。安装vue-cli2.9

1.1 查看是否已安装2.9版本的vue

vscode打开新建目录 打开终端 输入以下命令

vue -V

1.2 如果版本不对，需要卸载重装（当然，这里只是要求版本和node匹配，其他工程可更改版本，创建项目过程类似）

输入以下命令

npm uninstall vue-cli

1.3 卸载之后安装2.9版本

输入以下命令

npm install vue-cli@2.9.x -g 
// -g 代表全局安装

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

1.4 查看版本，检查是否安装成功

输入以下命令

vue -V

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

3 。通过脚手架，下载vue项目模版

此时创建以 stuproject 为项目名的项目模版 输入以下命令

vue init webpack stuproject

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

4 。交互式选项，具体选择如下

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

5 。项目拉取成功

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

6 。查看目录结构

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

7 。进入新下载的文件夹，切换目录

输入以下命令

cd stuproject

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

8 。运行项目

输入以下命令

npm run dev

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

9 。浏览器查看

输入以下命令

http://localhost:8080

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

10 。退出运行

终端 按两次 ctrl + c 退出运行环境

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

11。 尝试运行项目

百度云盘案例源码获取链接（地址如下）：

链接：https://pan.baidu.com/s/1AB1gScU5SYtCgS3xnK3mIA?pwd=1234
提取码：1234

将stuproject 项目下载后放到任意目录下 使用vscode打开目录 终端输入以下命令

npm run dev

输入以下命令 查看是否运行成功

http://localhost:8080

Vue框架零基础入门之拉取官方项目模版，引入必备工具vuex,router,package.json 等（详细图解，快速入门，附项目源码）

总结：

通过以上的学习，各位笔友应该能够使用Vue框从官网拉取项目模版，创建新项目了。

码字不易，认为楼主写的还不错，对你有帮助的话，请给个三连（关注、点赞、收藏）另外有问题可评论区留言讨论。

后期会完善Vue进阶语法的相关知识，有帮助的话，敬请关注楼主 持续更新中ing 。。。（不定时发文）

转载时请注明出处链接

百度云盘案例源码获取链接（地址如下）：

链接：https://pan.baidu.com/s/1AB1gScU5SYtCgS3xnK3mIA?pwd=1234
提取码：1234

参考文档：

1.vue官方文档：Vue.js (vuejs.org)

其他随笔推荐：

1. 十大排序算法（Java实现）（作者力推）：https://www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html

2. Vue开发环境的部署：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-01.html

3. Vue基础入门一：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-02.html

4. Vue基础入门二：https://www.cnblogs.com/zbcxy506/p/note_1vue-03.html

5. Vue基础知识思维导图：https://www.cnblogs.com/zbcxy506/p/note_1vue-04.html

6.Vue动画和过渡效果：https://www.cnblogs.com/zbcxy506/p/note_1vue-05.html

7.Vue框架中路由：https://www.cnblogs.com/zbcxy506/p/note_1vue-06.html

8.Node多版本管理工具GNVM：https://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html

9.用户登录注册案例：https://www.cnblogs.com/zbcxy506/p/note_1vue-08.html

标签 , ,