vue企业项目demo_vue入门环境搭建及demo运行

vue简介&＃xff1a;Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习&＃xff0c;非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时&＃xff0c;Vue.js 也能完美地驱动复杂的单页应用。

node简介Node.js是一个Javascript运行环境。实际上它是对Chrome V8引擎进行了封装。Node 是一个服务器端 Javascript 解释器&＃xff0c;他会改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序&＃xff0c;编写能够处理数万条同时连接到一个物理机的连接代码。那直白的说&＃xff0c;Node.js就是服务器程序&＃xff0c;是用来做后端的技术&＃xff0c;不能直接用于前端开发。但是干前端的学会了会更加的牛逼&＃xff0c;对编程的思想和代码效率有很大的提升。Node大量使用时间驱动实现异步开发&＃xff0c;能够高效的打通前后端&＃xff0c;所以vue也是采用他作为配置环境&＃xff0c;便于大型项目的开发。如何查看是否安装成功&＃xff1a;黑窗口(命令行)中输入&＃xff1a;node -v

image.png

第二步&＃xff1a;安装vue.js

打开cmd命令框&＃xff0c;输入 npm install vue

如下图&＃xff1a;

image.png

第三步&＃xff1a;安装vue-cli工具

Vue-cli是vue官方提供的一个命令行工具(vue-cli)&＃xff0c;可用于快速搭建大型单页应用

打开cmd命令框&＃xff0c;输入 npm install --global vue-cli

第四步 &＃xff1a;安装webpack

打开cmd命令框,输入 npm install webpack -g

第五步&＃xff1a;创建vue的demo项目

进入到你想要存放项目的目录下&＃xff0c;执行该命令( vue init webpack 项目名称)&＃xff1a;

vue init webpack demo_vue

demo项目及生成。

image.png

demo目录结构

image.png

第六步&＃xff1a;运行vue的demo项目cd demo_vue   //进入到刚创建的项目中  $ npm install

$ npm run dev     //运行项目 在浏览器直接访问&＃xff1a;http://localhost:8080/即可

作者&＃xff1a;挑战者666888

链接&＃xff1a;https://www.jianshu.com/p/40479da830de