vue.js2.0环境搭建

Dear 丶 2022-06-16 03:55 105阅读 0赞

# vue.js概述 #

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

# vue.js安装 #

1.  安装node.js  
    vue.js环境的搭建需要借助于npm来安装一些必要的依赖，所以要先安装node.  
    node下载地址：[https://nodejs.org/en/download/][https_nodejs.org_en_download]
2.  全局安装 vue-cli  
    npm install –global vue-cli  
    如图：  
    ![这里写图片描述][SouthEast]  
    安装成功后图示：  
    ![这里写图片描述][SouthEast 1]
3.  创建一个基于 webpack 模板的新项目  
    vue init webpack <项目名称>  
    示例：vue init webpack vuedemo  
    如图：  
    ![这里写图片描述][SouthEast 2]  
    注意：红线内输入n即可，不需要安装
4.  安装依赖  
    进入项目目录，执行以下命令：  
    cd vuedemo  
    npm install  
    安装过程图：  
    ![这里写图片描述][SouthEast 3]  
    安装过程比较慢，请耐心等待  
    安装完成图：  
    ![这里写图片描述][SouthEast 4]
5.  测试  
    npm run dev  
    如图：  
    ![这里写图片描述][SouthEast 5]  
    如果成功可以在浏览器中访问：[http://localhost:8080/][http_localhost_8080]  
    如图：  
    ![这里写图片描述][SouthEast 6]  
    至些vue.js环境搭建成功

参考链接：  
[http://www.runoob.com/vue2/vue-install.html][http_www.runoob.com_vue2_vue-install.html]  
[https://cn.vuejs.org/v2/guide/installation.html][https_cn.vuejs.org_v2_guide_installation.html]

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[SouthEast]: /images/20220616/9aeecb1ed7c141388ca61f614cf64305.png
[SouthEast 1]: /images/20220616/099ed12e1e584c44a4cb13d698c911b9.png
[SouthEast 2]: /images/20220616/8b1bd9a266fe4a2da9ba7fd63fb79c63.png
[SouthEast 3]: /images/20220616/9322e51b2855441d9b706482afb6806a.png
[SouthEast 4]: /images/20220616/48518d29d7ec4d6eaa6265ffdd823d9e.png
[SouthEast 5]: /images/20220616/ec88ef31d5f64029893c347ada0e0037.png
[http_localhost_8080]: http://localhost:8080/
[SouthEast 6]: /images/20220616/ab2341c62afe463ab2684d1f49f7703b.png
[http_www.runoob.com_vue2_vue-install.html]: http://www.runoob.com/vue2/vue-install.html
[https_cn.vuejs.org_v2_guide_installation.html]: https://cn.vuejs.org/v2/guide/installation.html