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(最后这个是我创建的项目文件夹的名字)

  过程中会出现  

3 cd vue_project

npm install=>会生成这个文件夹node_modules

npm run dev   准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中或者输入 
   cnpm run dev 回车即可 ,就会打开浏览器 http://localhost:8080  

时间: 2024-10-20 15:21:48

Vue.js的搭建的相关文章

vue.js环境搭建

vue最开始说是库,现在应该可以说是框架了,很多大公司都开始用vue了,这得源于vue的本质 1:数据化驱动,2:组件化模板.项目中用vue都得搭建环境,经过一段时间的摧残后终于有勇气来写篇关于vue环境搭建的博文了,我相信网上已经有很多前辈的博文能够帮助大家完成搭建,与我来说只是记录下自己搭建环境的一点心得,如若能够帮助到两三人,足以. 1:因为vue.js的运行是基于node.js的npm环境下,所以我们得先安装node.js,这个就不累赘了,网上下个node.js安装即可. 2:记得刚开始

vue.js项目搭建教程(参考)

第一步:安装node.js 1.传送门下载安装https://nodejs.org/en/ 2.打开cmd控制台分别查看node版本.path,npm node -v path npm -v 3.推荐淘宝镜像 npm config set registry https://registry.npm.taobao.org 4.安装全局vue-cli脚手架,并检查 cnpm install --global vue-cli vue -V 第二步:建立一个vue-test文件夹,并使用webpack模

AspNetCore MVC + Vue.Js 项目搭建

1.准备 全文重点在于搭建环境,其他相关知识点请百度. VS2017 升级到最新的版本 安装 net core 2.0 安装 npm (npm相关使用请百度或咨询前端小伙伴) 全局安装 webpack (webpack相关使用请百度或咨询前端小伙伴) vue 的使用 (推荐看一下vue创建的webpack项目模板) axios的使用,vue中用于调用后端接口的方法 2.创建AspNetCore MVC项目 3.清空项目 删除不必要的文件后,项目文件结果如下: 4.初始化项目 4.1 在项目web

vue.js环境搭建踩坑记

1. JS 包安装工具的选择npm or yarn 刚开始进行环境搭建的时候,用的是npm包管理工具,但是运行命令 npm run dev,启动项目总是报错,百度说是webpack和webpack-dev-server版本不兼容问题 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好 但是在用npm update命令后,webpack和webpack-dev-server版本会自动升级,,后面看到了用yarn, 具体步骤可参考:https://blog.csd

vue.js项目文件搭建

1,安装node.js以及sublime编辑器 Win+r 键 输入cmd进入命令行 输入 node –v显示出node.js版本号即表示node.js安装成功. 2,安装cnpm 淘宝镜像 输入命令:npm install -g cnpm –registry=https://registry.npm.taobao.org 稍等片刻出现:表示安装成功   3安装vue脚手架工具 vue-cli  命令:cnpm install –g vue-cli 输入vue –V  V为大写 显示出版本号即表

vue.js webpack搭建开发环境

国内推荐用 cnpm 下载 npm 太慢了 1, 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 下载完之后 输入 cnpm -v 查看版本 2 安装vue脚手架 cnpm install -g vue-cli 3.初始化一个项目 vue init webpack my-project 填写项目名字 描述 作者 no no no .... 然后就会出现这些文件 4.下载依赖 成功后出现 node_这个文件

Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 在配置环境之前呢,有些基础的东西还是要和大家普及一下的.如果你已经对Vue.js有所了解,那请点击 配置步骤  跳转到配置环境的阅读,否则,请耐心看完看完. 首先,介绍一下Vue.js的概念,他是干啥的呢?一定要配置vue的运行环境吗? 如上述Vue.js不是个全能的框架,因为他的

vue.js单页面应用实例

一:npm的安装 由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功. 测试node的版本号:node -v 测试npm的版本号:npm -v 以上提示代表安装成功 二:vue.js环境搭建 1.首先安装淘宝的npm镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装vue.js环境::cnpm install -g vue-cli 3.测

【前端】vue.js环境配置以及实例运行简明教程

vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue.js开发环境搭建 VUE.JS简介 何为Vue.js Vue.js(读音 /vju?/, 类似于 view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue