vue项目的创建

工具介绍

node.js  基于 Chrome V8 引擎的 JavaScript 运行环境

npm   包管理器,是全球最大的开源库生态系统

vue 一套构建用户界面的渐进式框架

 vue-cli  vue脚手架,帮助你快速开始一个vue项目

1.首先安装node.js和npm

下载地址http://nodejs.cn/download/

安装node.js的时候,跟着安装步骤走就行,会连npm一起安装到本地。

$ node -v  查看node是否安装成功。

$ npm -v 查看npm是否安装成功。

2.安装vue和vue-cli

安装vue $ npm install vue  (此处不演示)

查看vue是否安装成功  $ npm -V   字母V是大写

安装 vue-cli   $ npm install -global vue-cli   (此处不演示)

3.创建项目

$ vue init webpack test        //webpack是模板类型,test是项目名称这里它会让你进行一系列的选择,按需求选择就好。
$ cd test   //进入项目路径

 $ npm install     //初始化依赖

$ npm run dev    //运行项目

出现下面的界面则证明成功。

如果出现npm本版不符,如下图:

 

进行npm本版升级   npm  -g install [email protected]

4.错误

关于 cannot get /  的错误

一定要确保npm 是3.0.0及以上 ,升级后查看一下版本,

我用 $ npm install npm -g 升级后依然找不到资源,但是 npm  -g install [email protected]之后再启动, 就可以找到资源了。

删除项目。

重新初始化项目。

 
时间: 2024-11-08 00:42:43

vue项目的创建的相关文章

windows环境下vue项目的创建

1.安装node.js(https://nodejs.org/en/),将安装目录配置到环境变量PATH: 2.检查安装情况: 2.1)node -v 2.2)npm -v 3.安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 可以使用cnpm替代npm 4.安装vue-cli:cnpm install -g vue-cli 5.创建项目 5.1)进入工程目录:vue init webpack 工程名 5.

vue入门003~vue项目引入element并创建一个登录页面

上一节已经教大家如何创建一个vue项目,这一节,我们就温故下vue项目的创建,顺便引入element,实现一个简答的登陆页面. 老规矩,先看效果图 一,快速创建vue项目 二,引入element类库 首先我们进入element官网:https://element.eleme.cn/#/zh-CN/component/installation简单熟悉下element.然后如下图所示引入element类库.做完上面的操作后,不要忘记安装依赖. 三,在main.js里引入使用 如下图红色框里所示 四,

Vue.js系列(一):Vue项目创建详解

引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vue项目,以及对项目目录结构的解释说明,使大家清晰的了解Vue项目的开发流程. 简介 Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项

vue项目中使用阿里iconfont图标

在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标库,先看一下官网 可以看到有将近两百万的图标量,可以说我们想要的矢量图图标这里大部分都是有的,下面直接开始如何在vue项目中使用,方法有两种 方法一:简单粗暴法 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 例如我现在选择三个图标 点击购物车,添加至项目 为了方便可以给项目起一个名字 选

vue项目及插件

vue项目的创建 方法1: cmd中执行 vue ui vue会创建一个socket,方便快捷 方法2: 命令行建立 vue create v-proj //创建项目名为v-proj的项目文件 >>>default (bable,eslint) //默认 manually select features //自定义 (*)bable //把es6语法解析为es5语法(防止沙雕浏览器无法解析es6) TypeScript //js编程还是ts编程 Progressive Web App(P

创建一个Vue项目

Vue.js不支持IE8及其以下版本,因为Vue.js使用了IE8不能模拟的ECMAScript5特性. 在用Vue.js构建大型应用时推荐使用NPM安装,Npm能很好地和诸如Webpack或Browserify模块打包器配合使用.Vue.js也提供配套工具来开发单文件组件. vue的安装依赖于node.js,要确保你的计算机上已安装过node.js.可以进入cmd编辑器,输入node -v进行查看.node尽量要用一些新的版本,否则后续安装会提示node版本过低.去node官网下个新版node

命令行创建一个简单的vue项目过程

//计算机已安装好node和git环境 sudo npm install -g cnpm --registry=https://registry.npm.taobao.org //Mac环境下全局安装cnpm cnpm -v //查看cnmp版本号 ls //查看当前目录 cd //进入根目录 cd git //进入git文件夹 cd VUE //进入VUE文件夹 ls //查看当前目录,显示为VUE文件夹内容 vue init webpack vue-project //在当前目录下创建名为v

新手入门vue 使用vue-cli创建项目

本文是针对对于完全没有了解过vue 和npm,连运行环境和项目构建的都不会的小白,对于前端老司机的就不用看了,浪费时间. 使用npm 与vue-cli 构建vue 项目 第一步:安装运行环境(node与npm) nodeJ官网:http://nodejs.cn/ 下载安装包( 安装) 安装完成后,需要检测是否安装成功 使用命令行cmd  打开dos 黑窗口,运行 node  -v 和 npm –v,出现版号说明安装成功 注(npm 是node自带的,在安装node时已经安装了) 如何升级npm

命令行创建 vue 项目(仅用于 Vue 2.x 版本)

1 .安装 Node.js 和 npm ( 验证安装成功输入下图 1 命令行可得 2:输入命令行 3 可得 4 即安装成功) 2.安装全局 webpack (安装依照下图输入命令行 1 耐心等待至到出现 2 表示成功) 3.安装全局 vue-cli (安装依照下图输入命令行 1 耐心等待至到出现 2 表示成功) 4.创建 vue 项目 (输入下图命令行,红线部分是你想要创建的项目名称) 5.第 4 步之后会出现一些对话选项,仅一项选 n 后按回车键(如下图红色区域对话选项), 其余全部按回车键