前言

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

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

百度网盘链接















，案例源码获取地址：

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

随笔目录结构：

PS: 点击标题后的 --> 这个标志可以浏览目录结构  
  
  
  
  
  
  
  
 ，以便快速定位需要的内容

一 
  
  
  
  
  
  
  
 、准备工作

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目录结构如下图所示 
 
 
 
 
 
 
 
。

二

 


 


 


 


 


 


 


 

、搭建项目详解

1  
   
   
   
   
   
   
   
  。目录建设

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

2 

 

 

 

 

 

 

 

 
。安装vue-cli2.9

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

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

1.2 如果版本不对


 


 


 


 


 


 


 


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

输入以下命令

1.3 卸载之后安装2.9版本

输入以下命令

1.4 查看版本
 

 

 

 

 

 

 

 
，检查是否安装成功

输入以下命令

3 
 

 

 

 

 

 

 

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

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

4                  。交互式选项
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，具体选择如下

Project name 可以默认回车 Project description 可以默认回车 Author 可以默认回车 Vue build runtime only 选择runtime only Install vue-router? Yes Use ESLint to lint your code? No Set up unit tests No Setup e2e tests with Nightwatch? No use NPM 选择NPM

5 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
。项目拉取成功

6 















。查看目录结构

7                          。进入新下载的文件夹















，切换目录

输入以下命令

8 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
。运行项目

输入以下命令

9 























。浏览器查看

输入以下命令

10                  。退出运行

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

11
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
。 尝试运行项目

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

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

提取码：1234

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

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

总结：

通过以上的学习                         ，各位笔友应该能够使用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