总结:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
# 安装依赖





$ npm install
# 运行
$ npm run dev

具体步骤:

1.首先建立一个文件夹(禁止使用中文名),打开文件夹 ,按住shift+鼠标右键 ,选在此处打开命令行窗口

2.如果没有安装node,则安装node

3.安装完之后,在命令行输入 node -v 查看版本号;

(1)node有自带的npm,进行全局命令安装 (npm install --global vue-cli)

(2)----想安装速度快点,可以使用淘宝镜像如下

----命令提示符执行 npm install cnpm -g --registry=https://registry.npm.taobao.org

安装完成淘宝镜像后输入 cnpm -v 查看其版本号;

在命令行输入  cnpm install --global vue-cli;

4.安装完成后 命令行输入 vue  -V  检查vue是否安装成功

5.使用vue建立一个项目名为“my-project”

----注:vue-cli 的模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,他的配置并不全放在根目录下的          webpack.config.js 中。

----webpack-simple 相对简单的,它根目录下才有个 webpack.config.js。

vue init webpack my-project

6.项目创建过程中,有如下选择,选择no   (该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,可以避免不必要的麻烦)

7.建立像猕猴,安装项目依赖 npm install 或者  cnpm install

8.安装成功,项目目录下多出一个node_modules文件夹

9.进入项目目录文件夹 (my-project),就可以使用vue进行项目开发了

10.使用npm run dev 或者 cnpm run dev 便可以打开本地服务器实时查看效果(localhost:8080)

11.初始效果

12.退出监听,可以直接ctrl+c;

vue安装--使用node的更多相关文章

  1. Mac 安装node npm cnpm vue 以及卸载 node 和 npm 的方法 清空npm缓存的方法

    S01 安装node(内含npm) 首先,到官网下载长期支持版,截止目前,最新的长期支持版本号是10.16.3 https://nodejs.org/zh-cn/download/ 下载完毕后,安装该 ...

  2. [Vue安装教程]十分钟学会vue 安装

    Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...

  3. Vue安装依赖npm install时报错问题解决方法

    1.vue的安装依赖于node.js,要确保你的计算机上已安装过node.js.    可进入cmd编辑器,输入命令 node -v进行查看.出现版本信息即成功!没有则从浏览器上面下载安装即可,没有安 ...

  4. Node.js的安装以及Node.js的模块管理

    索引: Node.js的安装以及Node.js的模块管理Node.js开发环境搭建以及对ES6的支持Node.js构建Vue.js项目Vue.js单文件组件的开发基于Vue.js的UI组件(Eleme ...

  5. vue — 安装并创建vue项目

    1.先从node.js官网(https://nodejs.org/en/download/) 下载并安装node,然后通过在命令行输入node -v命令,查看node的版本,要是出现相应的版本号就证明 ...

  6. VUE 安装&创建一个项目

    1,安装node.js vue依赖nodejs,所以首先要安装node.js 然后打开cmd,输入命令, node -v.正常出现版本号,说明你已经安装成功了 下载地址:http://nodejs.c ...

  7. vue 安装cli3.0版本,创建项目

    注意:Vue CLI需要Node.js版本8.9或更高版本(建议使用8.11.0+). 查看node版本:node -v  , 查看npm 版本  npm -v, 1.首先需要安装node.js环境 ...

  8. Vue 安装脚手架 工具 vue-cli (最新)

    假如您安装过旧版脚手架工具(vue-cli),您可以通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli卸载. Vue CLI 需要Node ...

  9. vue安装及环境搭建

    vue项目在pycharm里运行需要安装一个插件,打开settings,找到plugins,里面搜索vue.js,点击安装. vue安装 先安装node.js npm install -g @vue/ ...

随机推荐

  1. Django 自定义模板标签 报错django.template.exceptions.TemplateSyntaxError: '####' is not a registered tag library. Must be one of:

    我写代码遇到这个错误,但是发现程序没有写错,好像是程序有缓存,重新运行几次就好了. 自定义模板标签,可以不用写views,url直接通过自定义函数把变量传给模板. 具体实现: 1.在app下新建Pyt ...

  2. anularjs前端分页

    var dataList = []; $scope.page = { page:1, pageSize:15, numPerPageOpt:[15,30,50,100], totalNum:0, to ...

  3. P4088 [USACO18FEB]Slingshot 线段树+扫描线

    \(\color{#0066ff}{ 题目描述 }\) Farmer John最讨厌的农活是运输牛粪.为了精简这个过程,他产生了一个新奇的想法:与其使用拖拉机拖着装满牛粪的大车从一个地点到另一个地点, ...

  4. 使用box-shadow 实现水波、音波的效果

    用到的工具 animation box-shadow html: <div class="watersource"> </div> css: .waters ...

  5. 通过div实现arcgis自定义infowindow

    通过给地图绑定缩放,单击和平移命令,实现在地图附加div标签,实现infowindow效果: /* *作者 扰扰 *自定义esri弹窗 *paramter Map地图对象 *paramter x *p ...

  6. angularJs实现修改功能

    思路: 对表单中内容进行修改,首先需要获取这个内容,再进行修改,再清空弹窗中的内容 //查询实体 $scope.findOne=function(id){ $http.get('../brand/fi ...

  7. C语言之基本编程思想与基本概念扫盲

    前言:C语言是包含了很多编程的基本思想,理解C能够有助于理解其他高级语言,深刻理解编程很多基本思想:这对新手入门是有很多好处的,正所谓磨刀不误砍柴工,内功与基础修炼扎实了,才能开始盖高楼大厦. 这篇文 ...

  8. hdu3746 KMP-next数组的应用

    Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  9. Arm寄存器介绍及汇编基础

    一.ARM处理器支持7种工作模式 ① 用户模式(USR): 用于正常执行程序(The normal ARM program execution state) ② 快速中断模式(FIQ): 用于高速数据 ...

  10. sql的几种常用锁简述

    比较全的文章地址保存下:http://www.cnblogs.com/knowledgesea/p/3714417.html SELECT * FROM dbo.AASELECT * FROM dbo ...