Vue.js教程-安装和HelloWorld

Vue.js教程-安装和HelloWorldVue.js教程前言安装vue教程安装node.js前言作为国内最潮流的前端框架值得一学,同时公司后端面试中也会提到一些,反正就是逼着后端转全栈呗,公司少花钱,咱们多拿钱。Vue.js官方文档:这里面介绍了很多内容,非常全面,毕竟目前还是国内是主流市场,相比较于Angular和React更容易上手,也更容易部署,简单好用就完事了。安装vue教程安装node.js首先安装node.js,这步不是必要的,如果你使用的是html的话,那可以直接通过这个方法直接引入:<scriptsr

前言

  • 作为国内最潮流的前端框架值得一学,同时公司后端面试中也会提到一些,反正就是逼着后端转全栈呗,公司少花钱,咱们多拿钱。
  • Vue.js官方文档:这里面介绍了很多内容,非常全面,毕竟目前还是国内是主流市场,相比较于Angular和React更容易上手,也更容易部署,简单好用就完事了。

安装vue教程(HelloWorld)

安装node.js

  • 首先安装node.js,这步不是必要的,如果你使用的是html的话,那可以直接通过这个方法直接引入:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 如果是正式开发的话,使用node会非常方便,打包部署、解析vue组件模块并进行拼接(为什么要将vue拼接下个文章讲),测试服务器localhost等功能,比较省事。
  • 先去node官网下载:node.js官网
    nodejs
  • 一直点下一步就安装完了。
  • 使用命令行,输入node -v查看版本号,出现版本号就证明安装成功。
  • 因为node带了npm,所以直接安装vue就行,如果感觉慢的话,就先安装cnpm(淘宝的镜像,速度很快,但有可能缺少相应的包),安装语句:npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Vue

  • 一般都安装最新版,安装语句:npm install -g @vue/cli(3以上版本)
  • 三以下版本安装语句:npm uninstall -g vue-cli
  • vue -V查看版本就行了。

创建Vue项目(HelloWorld)

开发工具

  • 我用的是VScode,这玩意开放性特别大,有很多合适的插件,非常nice,安装vscode就不说了,先介绍里面用到的插件。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 这些插件很多博主都有介绍和使用,但一般看英文也能看懂,挺简单的。

创建第一个项目

  • vue-cli3以上使用vue create first就行,first是项目名。
  • 点击回车后出现下面的选项:
    在这里插入图片描述
  • 第一行是我以前保存的用户的使用插件情况。
  • 第二行是默认创建,选中第二行点击回车就自动创建项目了。
  • 第三行是进行自定义创建。
  • 在这里我选择第三行给表演一下,来吧展示!
    在这里插入图片描述
  • 第一个选项必选,没啥好解释的。
  • 第二个是支持TypeScript,咱一般都用JavaScript。
  • 第三个是渐进式Web应用程序(PWA)
  • 第四个是路由,和后端的不太一样,它这个是把路径和组件或试图连接起来,也是非常简洁方便。
  • 第五个是vue的状态管理器,大管家,管理整个项目中共有的东西,后面再详细介绍。
  • 第六个是css预处理,想用less啥的就选吧。
  • 第七个是代码校验,反正我不用,感觉这玩意怪严格的,太麻烦。
  • 第八个和第九个就是测试,也不用选。
    在这里插入图片描述
  • 第三个是问router使用什么模式,分为两种模式,一种是hash,另一种是history,常用的是history,等写到路由细说,最直观的效果例如:
    • hash模式:localhost:8080/#/home
    • history模式:localhost:8080/home
  • 第四个是选择一个css预处理的,常用的是node-sass、less啥的。
  • 第五个是选择配置文件,有两个选择,第一个是选择单独的文件中,第二个是写在package.json里,我选的是写在单独一个文件里。
  • 最后一个是用不用保存当前选择作为一个用户,保存了下次就会出现我那个第一个选项(coderhqf那个选项),下次选它就行了。
  • 项目成功创建后出现:在这里插入图片描述
  • 依次在vscode终端中输入这两个语句就能启动了。
    在这里插入图片描述
  • 显示的是vue的界面:
    在这里插入图片描述

创建HelloWorld

  • 目前的项目打开是vue的界面,那么要显示出HelloWorld就先把初始项目中没用的组件和代码删掉。

  • 当前的目录结构:
    在这里插入图片描述

  • 对于自己的项目,assets里的图片、components中的vue文件和view里的vue文件都是没有用的,删掉就行了,都是vue文件为什么存在于不同的文件夹下呢?下一篇文章就说啦!

  • 下面删代码:
    在这里插入图片描述

  • <router-link></router-link><router-view/>删掉,因为这个是使用router-link连接的子组件,没用的CSS也可以删掉,该成下面的:
    在这里插入图片描述

  • 因为在router中import了已经删掉的Home.vue和About.vue了,所以要删掉。在这里插入图片描述

  • 修改后效果:
    在这里插入图片描述

  • 当前的目录结构就非常干净:
    在这里插入图片描述

  • 在vscode终端输入npm run serve运行项目,效果:
    在这里插入图片描述

  • 最简单的HelloWorld就结束了!

后话

  • 把以前自学的vue总结整理一下,估计一周两周写完这个vue,其实我是个后端,CSS对我一点也不友好!!!!好气噢,主要还是自己审美不太行。

今天的文章Vue.js教程-安装和HelloWorld分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29229.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注