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为大写

显示出版本号即表示成功安装。

4可能你发现你的node命令行默认是在c盘下运行命令,这时我们需要在D盘运行并且在D盘下生成一个vue项目文件,这时我们可以运行:

D:

cd:d:\leranVue   learnVue是你的预先在D盘新建的一个文件夹

即可定位文件路径了

5生成一个vue项目文件 名称为 myvue

输入命令 vue init webpack+项目名

vue init webpack myvue

查看node 的路径d:\leranVue,没发现有myvue,说明还没有安装项目成功

这时查看命令行还有几个需要自己填写项。

输入工程名 描述 作者 以及一系列的是否选择Y/N 这里我们都选择Y ,出现上图即表示项目导入成功 到myapp下查看吧

6由vue官方提供的项目文件体系至此安装成功

7运行文件

cd:myvue

cnpm install

cnpm run dev

出现端口信息表示已经成功!

8打开浏览器输入http://localhost:8080,出现界面即表示成功!

时间: 2024-08-26 03:34:35

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的搭建

vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下) 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到

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 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环境配置以及实例运行简明教程

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

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.测