草庐IT

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

智博程序园 2023-03-28 原文

前言

本篇随笔主要写了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打开新建目录 打开终端 输入以下命令

vue -V

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

输入以下命令

npm uninstall vue-cli

1.3 卸载之后安装2.9版本

输入以下命令

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

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

输入以下命令

vue -V


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

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

vue init webpack 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 。进入新下载的文件夹,切换目录

输入以下命令

 cd stuproject

8 。运行项目

输入以下命令

npm run dev

9 。浏览器查看

输入以下命令

http://localhost:8080

10 。退出运行

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

 11。 尝试运行项目

 百度云盘案例源码获取链接(地址如下):

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

 

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

npm run dev

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

http://localhost:8080

 

总结:

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

 

 
 
 
 

有关Vue框架零基础入门之拉取官方项目模版,引入必备工具vuex,router,package.json 等(详细图解,快速入门,附项目源码)的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  3. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  4. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目? 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做,或者如果你需要避免为前N个元素构建中间数组,你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  5. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  6. UE4 源码阅读:从引擎启动到Receive Begin Play - 2

    一、引擎主循环UE版本:4.27一、引擎主循环的位置:Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑:1、EnginePreInit:加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序:模块加载过程:(1)注册模块中定义的UObject,同时为每个类构造一个类默认对象(CDO,记录类的默认状态,作为模板用于子类实例创建)(2)调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类(UGame

  7. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  8. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  9. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  10. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网,点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows,点击立即下载。3.下载完成,文件大小615MB,如下图:4.鼠标右击,以管理员身份运行。5.点击下一步6.勾选条款,点击下一步7.先勾选,再点击下一步8.去掉勾选,点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证,复制填入,然后点击输入即可,亲测有效。13.点击完成14.重启系统,点击是15.双击VMwareWorkstationPro图标,进入虚拟机主

随机推荐