Vue.js基础学习之 搭建vue.js 项目框架。

还是那就俗话,写博客的原因就是为记笔记。其实本人也在word 文档上,也记了,但是怕丢。所以写成博客,当自己再需要的时候可以查看。本人主要是c#,asp.net。为了能一人独立开发一个完整的项目,所以学习一套前端的架构。有错误的地方,欢迎大家指出。不说废话,赶紧利索的写实货的东西。

安装前端编辑器 VS Code

1,下载:https://code.visualstudio.com/ 下载之后,一路安装下去。

 2,汉化。ctrl+shift+p 快捷方式搜素,如下图。

Vue.js基础学习之 搭建vue.js 项目框架。_第1张图片

改为“zh-CN”

Vue.js基础学习之 搭建vue.js 项目框架。_第2张图片

 注意:如果更改后,依然不汉化,需要安装插件。商店里搜素就可以了。

Vue.js基础学习之 搭建vue.js 项目框架。_第3张图片

 创建vue.js 项目

创建文件夹

打开vs code,把文件夹放入工作区

Vue.js基础学习之 搭建vue.js 项目框架。_第4张图片

快捷方式ctrl + ~ 打开命令控制台

键入命令:vue -V 。注意大小写

Vue.js基础学习之 搭建vue.js 项目框架。_第5张图片

如果如上图所示的话,进行下步,如果提示错误,vue 不是命令符,请看上篇文章,安装npm 及vue.js

键入命令:vue init webpack (注:webpack 是什么东西,不懂的恶补一下,毕竟什么东西得自己研究一下才可以)

Vue.js基础学习之 搭建vue.js 项目框架。_第6张图片

键入命令:cnpm install (也可以npm install 这个是在网络好的情况下,cnpm 是上篇网站中配置的taobao 的镜像)

Vue.js基础学习之 搭建vue.js 项目框架。_第7张图片

键入命令:npm run dev

如下图

Vue.js基础学习之 搭建vue.js 项目框架。_第8张图片

访问:http://localhost:8081 (你们的可能是http://localhost:8080  ,我的8080端口被用了)

Vue.js基础学习之 搭建vue.js 项目框架。_第9张图片

以上就是自己学习创建的简单的vue.js 项目。

你可能感兴趣的:(Vue.js)