详解Vue.js入门环境搭建
vue这个新的工具，确实能够提高效率，在经历的一段时间的摧残之后，终于能够有一个系统的认识了，下面就今天的收获做一个总结，也是vue入门的精髓：
1.要使用vue来开发前端框架，首先要有环境，这个环境要借助于node，所以要先安装node，借助于node里面的npm来安装需要的依赖等等。
这里有一个小技巧：如果在cmd中直接使用npm来安装的一些工具的话会比较慢，所以我们使用淘宝的npm镜像：
输入npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了
安装完npm镜像后，开始安装全局vue-cli脚手架，之所以要用vue-cli，是应为这个工具能帮我们搭建好我们需要的模板框架，比较简单。方法：cnpm install -g vue-cli 回车，验证是否安装成功，在命令行中输入vue，出来vue的信息说明安装成功
2.安装完脚手架以后开始，开始创建一个新项目：命令 vue init webpack vue_project(最后这个是我创建的项目文件夹的名字)
至此，一个新的项目文件夹就创建完成，这个项目文件是在使用了脚手架vue-cli的前提下创建的，所以使用了这个工具提供的默认版式。
这就是使用脚手架搭建的项目文件的结构
3.因为各个模板间都是相互依赖的，所以要安装依赖，在命令行输入cnpm install ,你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹，里面就是刚才安装的所有依赖。
4.准备工作做好以后，测试一下项目里面默认的app.vue模块能否跑起来，这是需要先安装一下服务器环境，在命令行中输入
cnpm run dev 回车即可
8080就是默认的端口，在浏览器地址栏中输入localhost:8080会发现默认的模块打开了！
注：如果已经全局安装过vue-cli了，再搭建项目的时候无需再安装一遍，直接使用vue init webpack 项目名 即可
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了element tree树形组件回显数据问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要给大家介绍了关于vue中组件＜router-view＞使用方法的相关资料,Vue 路由中的 <router-view/> 是用来承载当前级别下的子级路由的一个视图标签,此标签的作用就是显示当前路由级别下一级的页面,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了Vue+springboot批量删除功能,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-05-05
vue之父子组件间通信实例讲解(props、$ref、$emit)
组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。2018-05-05
这篇文章主要介绍了vue实现禁止浏览器记住密码功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
本篇文章主要介绍了vue引入swiper插件的使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
本文主要介绍了Element中Select选择器的实现，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章介绍了VueX安装及使用基础教程，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
这篇文章主要介绍了如何开发Vite3插件构建Electron开发环境,文中给大家提到了如何让 Vite 加载 Electron 的内置模块和 Node.js 的内置模块，需要的朋友可以参考下2022-11-11
我们做类似于猫眼电影的小程序或者H5 的时候 我们会做到那种 左右滑动的电影列表,这种列表一般带有电影场次,我这个项目是基于Taro +vue3 +ts 来写的用的组件库也是京东的nut-ui以上的代码和组件也有的是我二次封装的组件,对vue3电影切换列表知识,感兴趣的朋友一起看看吧2024-01-01
最新评论