Vue小白篇,环境搭建

寵の児 提交于 2019-11-29 05:39:36
前言

这部分非常的简单,很多人可能不屑一顾,所以写的人也比较少,写它的原因是,当初自己开始玩前端的时候一脸懵逼,浪费了一些时间在这一块,希望能对刚开始接触的人有所帮助。

渐进式JavaScript框架

以前用的多的都是jquery这些js框架,后面又有了react,Angular,到要学习的Vue,之所以选择vue是因为它入门简单,可以快速的培训人员进入岗位,也就是相对用人成本比较低,当然这是从招人和转型的角度说的。渐进式的js框架,我的理解是由简单到复杂的使用方式,它可以直接嵌入到html中使用,也可以像react这些一样适应各种复杂场景和要求,也可以很方便的和已有项目框架结合使用。官网文档是非常友好的,建议学习先看官方文档

环境搭建

1.直接在html代码中引用,直接在html代码中使用,可以快速的看到效果初学者会有成就感一些

开发环境版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.使用webpack 2.1 WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在开发的过程中,可以很好的即时的运行代码效果,大大提高开发效率 2.2 webpack的基本能力:处理依赖、模块化、打包 2.3 有兴趣可以去看官方文档webpack中文文档 2.4 使用前准备下载Node.js,选择稳定版本

2.5 安装完成后打开命令行管理工具,Windows键+R输入cmd运行,也可以使用Windows powershell输入命令行,显示版本号证明安装成功

npm -v   
node -v

注:npm是nodejs的包管理器,所以要先安装nodejs,有语言开发经验的应该接触过包管理器,类似于的nuget,maven,gradle

2.7 安装cnpm 因为npm安装插件是从国外服务器下载,受网络的影响比较大,淘宝团队用npmjs.org 镜像弄出了cnpm

输入命令行,安装完成后用cnpm替代npm运行之后的命令行就行了,同上面一样安装完后命令:cnpm -v 查看是否安装成功
npm install -g cnpm -registry=https://registry.npm.taobao.org

2.8 Vue CLI是vue的脚手架工具,可以快速搭建vue环境,是一个基于 Vue.js 进行快速开发的完整系统

安装
cnpm install -g @vue/cli

2.9利用Vue CLI创建第一个项目 2.9.1在命令行中定位到代码保存文件夹,例如D盘Code文件夹下,命名为oneDemo

vue create my_demo

回车,当前使用默认的再次回车就行了,等待生成代码 执行后结果

输入命令行

执行成功后结果,在浏览器中输入http://localhost:8080/就可以看到运行效果了

生成代码

开发工具

开发工具很多人都选择vscode,小巧快速,插件多。直接官网下载vscode安装就行了,也有国内的HBuilderX,这种东西看信仰啦。

总结:vue的基本环境搭建已经完成,随人简单,还是希望对部分人有所帮助。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!