现在vue.js那么火热,即使你公司不是用vue.js框架的,你自己也想学习一下了解一下提升以下吧?可是在使用vue.js之前是要搭建开发环境的,为什么要搭建运行环境?不搭建不行吗?直接使用<
script>
标签引入就可以了啊。你说的也对,那是在开发web的时候可以这么做,不过在开发小程序,app的时候,就不行了,因为小程序和app是不能使用JavaScript和html5开发的啊。因为Node.js是运行在服务器端的JavaScript,又因为vue.js需要依赖node.js和node的nmp工具来实现,所以算不懂java也可以使用vue.js开发。
一、下载node.js到官方网址去下载安装:https://nodejs.org/en/download/
文章图片
二、安装node.js下载完之后,在该安装目录下按住【shift】+鼠标右键然后你就会看到“从此处打开命令窗口”,点击就可以打来命令输入。
输入:node -v
用于检查是否安装成功node.js,返回的是版本号。
输入:npm install -g cnpm --registry=https://registry.npm.taobao.org
是安装国内淘宝npm镜像,因为担心node.js的自带的镜像慢。
文章图片
三、安装全局vue-cli脚手架vue-cli脚手架有什么用?为什么要安装。其实vue-cli框架,封装了组件模块等。在项目中直接拿过来用就可以了。
输入命令:cnpm install --global vue-cli
安装好了:
文章图片
四、创建项目我在VS Code 里面新建项目然后使用刚刚的方法【shift】+鼠标右键调出“从此处打开命令窗口”然后安装依赖,输入运行似乎行不通。
文章图片
是我想的太简单了,原来要基于打包工具创建项目,用命令创建项目还会把环境下载到目录下。我是基于webpack,所以输入命令:
vue init webpack tmall
【vue开发环境的搭建安装操作手册——七步搞定】然后npm就会有一系列问题问你,按照需求,输入yes或者no按回车。然后等待,创建万完项目就会看见一个项目文件夹了。
文章图片
文章图片
五、安装依赖因为在项目中,各个vue模版是相互依赖的,所以要安装依赖。
进入项目中,使用上面的方法,调用出cmd没,然后输入命令。
cnpm install
文章图片
六、修改项目默认地址因为在调试项目的时候,很多项目地址的默认端口都是8080,所以我们最好就在运行之前改以下,避免带来不必要的麻烦,以为哪里错了自己吓自己。
在项目的根目录下,有一个config的配置文件目录,打开index.js,修改里面的8080的端口。
文章图片
七、运行项目搭建好环境之后,来测试一下是否能够运行。
输入命令:cnpm run dev
然后就开始加载文件了,加载完之后就返回一个地址,就是你刚刚设置过的测试地址。在浏览器中输入地址,Oh yearh~~可以了
文章图片
文章图片
推荐阅读
- vue开发微信小程序图标如何引入的问题——已解决
- 计算机病毒–从新手到专业人士
- JavaScript for-in循环详细用法指南
- PHP中的关联数组详细介绍
- 算法(递归函数检查字符串是否是回文)
- Python MySQL 删除表用法指南
- 8086微处理器中的寻址模式详细指南
- 金融市场中的云计算服务简介
- 三星班加罗尔(SRIB)实习面试经验(校园内)