关键词：
本文是针对对于完全没有了解过vue 和npm，连运行环境和项目构建的都不会的小白，对于前端老司机的就不用看了，浪费时间。
使用npm 与vue-cli 构建vue 项目
第一步：安装运行环境（node与npm）
nodeJ官网：http://nodejs.cn/ 下载安装包( 安装)
安装完成后，需要检测是否安装成功
使用命令行cmd 打开dos 黑窗口，运行 node -v 和 npm –v，出现版号说明安装成功
注（npm 是node自带的，在安装node时已经安装了）
如何升级npm 的版本呢？很简单
执行命令：npm i –g to update （全局安装：建议） 或者 npm install –g npm
第二步：安装脚架手 vue-clic
安装vue-cli 有两种安装途径(npm 与 cnpm)，二选一
(1) 使用npm 安装vue-cli,全局安装 （该方式安装比较慢，国外镜像）
运行：npm install g vue –cli
(2) 使用cnpm ( 国内淘宝镜像)安装vue-cli
（2.1） 首先要注册cnpm
运行： npm install -g cnpm --registry=https://registry.npm.taobao.org
(2.2) 检测 cnpm 是否安装成功，出现版本说明安装成功
运行：cnpm -v
（2.3）使用cnpm 安装脚架手vue-cli
运行：cnpm install –g vue-cli
使用 vue –V（注意：大写V）查看是否安装成功
运行：vue –V
第三步 ：正式开始创建项目
1.使用 命令：cd 目录路径 ，进入到你指定的创建项目的路径下
如：
2. 使用 vue init webpack 初始化项目
运行：vue init webpack myfilst-vueproject(自定义文件目录名称)
一般默认，直接回车就可以了
在目前为止，已创建好一个vue 的项目，目录结构如：（结构详解看官网）
3.按照提示运行流程，在当前项目的目录下安装模块
运行: cd 项目名称
运行： npm install
正在安装模块依赖。。。。
模块安装完成，项目根目录下多一个文件夹
第四步：启动/运行项目
运行：npm run dev
成功运行,默认效果如：
如果没有显示正常的页面，看是否端口是否被占用，默认运行端口为8080，
项目根目录下 ->config->index.js
修改该端口值，重新运行：npm run dev
每次修改配置文件都要重新运行
第五步：打包上线
运行：npm run build
打包完成后，会在根目录下生成一个dist 的文件夹，可以在本地打开浏览，项目上线时，只需将dist 文件夹放在服务器即可
完结。。。。谢谢
五分钟教你使用vue-cli3创建项目（小白入门必看）(代码片段)
五分钟教你使用vue-cli3创建项目（小白入门必看）一、搭建vue环境安装Nodejs官网下载Nodejs，如果希望稳定的开发环境则下LTS(LongTimeSupport)长期支持版，稳定。点我进入node官网安装好后cmd输入node-v查询是否安装成功&#... 查看详情
新手使用vue构建单页面应用实例
步骤：1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请求我们的node服务端5.使用.vue文件进行组件化的开发 一、目录结构：二、搭建项目先安装vue-cli：sudo npminstall-gvue-cli使用vue-cl... 查看详情
不了解用 vue-cli 创建的 Vue 项目的项目结构
...2019-12-2722:51:32【问题描述】：我是Vue.js的新手，之前从未使用过前端框架。我使用“vuecreate”命令创建了一个项目，其中包含常用插件和所有内容（没有改变游戏规则），一切正常。我想从0开始，所以我删除了除了pu 查看详情
vue-cli新手搭建项目一
新猿新手入坑vue搭建项目 一、安装vue-cli1、打开cmd输入命令（已自行安装好npmnode等） npminstall--globalvue-cli （全局安装）二、创建项目 &nbs 查看详情
3.使用vue-cli创建项目(代码片段)
eslint：用来做项目编码规范检查的工具基本原理:定义了很多规则,检查项目的代码一旦发现违背了某个规则就输出相应的提示信息有相应的配置,可定制检查 1.创建项目 vue脚手架(vue-cli)是用来创建vue项目的工具包;//创... 查看详情
使用vue-cli创建vue项目及项目结构说明
...组件，因为npm比较慢，我一般选第三项，创建完项目后，使用cnpm安装（cnpm自行在网上查阅安装）创建项目完成后，会有后继命令的提示， 查看详情
使用 vue-cli 创建的 Vue 2 项目的 npm 更新失败
】使用vue-cli创建的Vue2项目的npm更新失败【英文标题】：npmupdatefailsforVue2project,createdwithvue-cli【发布时间】：2021-06-0422:26:55【问题描述】：我用vue-cli创建了一个Vue2项目并尝试运行npmupdate。不幸的是，我收到以下错误：npmERR!codeERES... 查看详情
vue.js学习之入门实例
...。首先看下实现的效果： 源码下载戳这里：源码1、使用vue-cli脚手架创建项目vue-cliinitwebpacktll备注：使用webpack模板创建名为tll的项目，这里会按照提示输入一 查看详情
如何在使用 vue-cli3 创建的 Vue2 项目中使用 axios
】如何在使用vue-cli3创建的Vue2项目中使用axios【英文标题】：HowtouseaxiosinVue2projectcreatedwithvue-cli3【发布时间】：2018-11-2313:36:06【问题描述】：我使用命令vuecreateaxe使用vue-cli-3.0.016beta创建了一个新的vue项目。然后使用npminstallaxios--s... 查看详情
vue-cli创建自己的项目
vue-cli是一个官方发布vue.js项目脚手架，使用vue-cli可以快速创建vue项目，GitHub地址是：https://github.com/vuejs/vue-cli 一、安装node.js首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。只是这样安装的node是固定版... 查看详情
使用vue-cli3.0创建项目(代码片段)
切换到要创建项目的目录下，vue create <your-project>如果能创建成功，则说明已经安装了vue-cli3.0；否则按照提示安装： npminstall-g@vue/cli，再次创建项目： vuecreate<your-project>出现以下提示，我直接选择了default... 查看详情
vue-cli入门——项目结构
前言在上一篇项目搭建文章中，我们已经下载安装了node环境以及vue-cli，并且已经成功构建了一个vue-cli项目，那么接下来，我们来梳理一下vue-cli项目的结构。总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所... 查看详情
vue-cli构建项目中组件的使用
在使用vue-cli脚手架构建项目时，组件的使用步骤大致是：创建组件component，编写模板template，抛出组件给项目export，引入组件import,抛出组件给页面export。一、创建组件 在componets文件夹里创建新的组件文件newVue.vue，注意后缀... 查看详情
vue-cli入门-----搭建一个简单的登录页面
参考技术A新建一个文件夹,使用cmd切换到该目录下,接下来在该目录下新建一个test2的项目命令:vueinitwebpacktest2(这里的test2是项目名称)项目目录结构:重启项目以后,界面如下:上面只是演示了使用vue-cli开发项目的基本流程,更多的是... 查看详情
vue-cli入门——项目搭建
Vue-cli入门（一）——项目搭建 前言：Vue-cli是一款基于vue的项目脚手架工具，其集成了webpack环境和主要的依赖，对于我们的项目搭建、开发、打包、维护管理等都是非常的方便。主要内容：1、 node.js安装和配置环境2... 查看详情
vue-cli入门——项目结构(代码片段)
前言在上一篇项目搭建文章中，我们已经下载安装了node环境以及vue-cli，并且已经成功构建了一个vue-cli项目，那么接下来，我们来梳理一下vue-cli项目的结构。总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所... 查看详情
vue-cli创建项目(代码片段)
使用vue-cli搭建项目下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下：npminstallcnpm-g--registry=https://registry.npm.taobao.org其实对于安装vue-cli，使用npm命令和cnpm... 查看详情
vue技术栈使用vue-cli3.0创建一个项目
vue.config.js + lintOnSave 代码检测设置 最后进行vue.config.js配置：①创建baseUrl：BASE_URL项目基本路径 查看详情