关键词：
文章目录
安装 Node.js 环境
1、官网下载
去node.js官网下载版本到本地，我下载到 E:\\node.js\\，下载完之后会有这么多文件
2、配置环境变量
配置nodejs 环境变量，方便我们在任何目录下使用命令
点击系统，点击高级系统设置，点击高级，点击环境变量，编辑系统变量中的Path，加上你所下载的node.js 的目录即可
如果启动cmd，敲一个 node -v 显示版本号，那么说明设置环境变量成功!
3、Node.js 配置
node.js 提供 npm 命令（node package manage），node.js 包管理工具，把所有的js库都归纳到一起了，通过坐标管理（js名字+版本号），和maven一样。我们需要js只需要输入命令 npm install ，自动联网从库下载，如果不加版本号默认下载最新版本，如果相加版本号，只需跟上@+版本号即可。
npm install axios // 默认下载最新版本
npm install axios@3.1.2 // 下载指定版本，需要加上@
我们在以后肯定是需要从node的库中下载依赖到本地中的，需要指定本地库的文件位置
（1）设置 node.js 依赖的本地仓库
npm config set cache "E:\\noderep" // 设置缓存存放位置
npm config set prefix "E:\\noderep" // 设置本地仓库存放位置
（2）配置下载国内镜像
这样每次下载的时候就不会去国外的中心仓库下载了，去国内的镜像下载速度很快，就跟maven配置阿里镜像一样
npm config set registry https://registry.npm.taobao.org
（3） 验证node.js 配置环境
npm config ls
可以看到我们配置成功了
安装 Vue Cli
0、安装配置好node.js环境
查看上文教程，完成安装配置
1、安装 vue cli
cmd执行命令，安装 vue2 版本
npm install -g vue-cli
等一会下载，下载完成
同时在我们自己设置的本地仓库多了一堆vue-cli文件
2、通过 vue cli 创建项目
（1）配置 node.js 本地仓库环境变量
在环境变量中加入本地仓库的路径方便执行命令
（2）测试命令是否能执行
在cmd输入命令
vue -init
如果有信息那么说明配置环境变量成功!
3、创建 一个vue项目
我们到达D盘，打开cmd
输入命令
vue init webpack hello
vue init webpack 是 使用vue脚手架初始化，使用webpack打包，这是固定写法，后面创建hello项目
第一次创建会加载模板，要等一会，必须联网
模板下载完毕后，开始交互
项目名是否要保持hello，如果不需要直接回车，如果需要改名那么删除进行重新输入即可。
项目描述是否保持默认，同上
项目的作者信息，如果电脑有git账户默认读取，如果想更改同上
项目选择编译+运行，还是 只运行，建议选额第一个，相当于热部署。
是否安装 vue路由，选择y
使用eslint在code中，就是个语法校验器，可以不用
是否设置单元测试，选择no
是否设置e2e 测试，选择n
是否要使用 npm install 命令，选择第一个
等待初始化完毕，vue项目创建成功
开始初始化
4、项目创建成功
此时查看d盘中的hello文件夹
此文件夹已经生成了 vue项目的所有文件，就像创建maven项目一样生成main目录、pom.xml、java目录、test目录等。这里生成的是前端vue的相关各种目录。
5、运行前端项目
我们创建好项目之后，建议我们进入 hello 目录，run dev 编译运行该项目
输入下列命令
cd hello
npm run dev
最后等待打包完成，我们就可以在浏览器进行访问了
进入到前端的项目中访问成功
利用vue-cli创建新项目(代码片段)
1、安装vue-clinpmivue-cli--gd 2、初始化一个项目vueinitwebpacktest//test是个项目名称并且配置相应的配置，（测试部份的可以选择no）3、运行初始化的项目，如果可以运行，那么说明安装成功cdtest//项目根目录下npmrundev//运行项目 ... 查看详情
vue命令行工具vue-cli详解(代码片段)
...3④拉取2.x模板(旧版本)⑤安装vue指定版本⑥博主node版本初始化项目①vueinit命令讲解②项目初始化③目录结构详解④运行项目node安装适合小白1去node官网下载2下载 查看详情
使用vue-cli初始化项目时运行‘npmrundev’报错(代码片段)
npmrundev 无法启动0infoitworkedifitendswithok1verbosecli[1verbosecli'D:\\\\ProgramFiles\\\\nodejs\\\\node.exe',1verbosecli'D:\\\\ProgramFiles\\\\nodejs\\\\node_modules\\\\npm\\\\bin\\\\npm-cli 查看详情
vue-cli初始化新项目(代码片段)
...装vue-cli2.2、在命令行输入vue-V命令验证是否安装成功3、初始化vue项目3.1、进入到我们想放vue项目的目录下，我这里在C:VueProject目录下3.2、执行命令vueinitwebpackvuedemo，会在C:VueProject目录下创建文件夹vuedemo，作为vue项目的根目录3.2.... 查看详情
vue-cli初始化创建vue2.9.6项目(代码片段)
阅读目录vue-cli安装vue-cli初始化创建项目1、vueinit命令讲解2、初始化创建项目package.json项目结构1、build目录（webpack配置）2、config目录（vue项目配置目录）3、node_modules（项目依赖包）src项目核心文件讲解项... 查看详情
使用@vue/cli初始化项目(代码片段)
VueCLI的包名称由vue-cli改成了@vue/cli。如果你已经全局安装了旧版本的vue-cli(1.x或2.x)，你需要先通过npmuninstallvue-cli-g 卸载它。附上vue-cli官方文档地址首先检查你的node版本，VueCLI需要Node.js8.9或更高版本(推荐8.11.0+)，命令为... 查看详情
vue-cli第三方相关
...1.全局安装vue-cli脚手架cnpminstall-gvue-cli2选择一个文件夹，初始化vue项目vueinitwebpack英文项目名3安装相关依赖，进入项目目录执行cnpminstall4运行npmrundev异步处理vue-axios1安装npminstall--saveaxiosvue-axios2在main.js中添加如下代码importVuefrom... 查看详情
vue-cli教程(代码片段)
...倘若npm速度慢，建议替换为cnpm（https://npm.taobao.org/）。2.初始化vue项目命令格式为：vue-cliinit重要文件讲解：package.jsonpackage.json文件是项目根目录下的一个文件，定义该项目开发所需要的各种模块以及一些项目配 查看详情
用vue-cli初始化vue项目
1.安装node环境使用node-v检查你的node版本号，如果出现版本号则表示你的node环境安装成功；2.安装vue-cli$npminstall-gvue-cli 安装成功之后，我们可以对我们的项目起一个名字$vueinitwebpackmyFirstVue其中webpack是指模板名称，模板名称有... 查看详情
vue-cli使用步骤
1、安装vue-cli: cnpminstallvue-cli-g2、初始化:vueinitwebpack-simple[项目名称]或 vueinitwebpack[项目名称]3、安装依赖:cd [项目名称] 然后cnpminstall4、运行项目:npmrundev5、打包:npmrunbuild6、其他: 安装路由: 查看详情
vue-cli搭建vue项目(代码片段)
...的V是大写的，会出现版本号说明安装成功D:\\vuedemovue-V3.初始化（此处是基于webpack的） 查看详情
vue.js学习——vue-cli初始化项目的坑终极解决办法和总结（离线安装webpack下载模板）(代码片段)
...篇博文做简要总结，并且手把手教授如何用vue-cli脚手架初始化项目，以及记录本人在这一过程中遇到的坑和解决办法。 查看详情
macos安装vue-cli初始化vue项目
当换台机器使用时，总是避免不了要装好环境进行开发，而这些步骤如果不是经常操作，忘记的可能性非常大，此时我们就可以查阅自己的博客进行安装新环境，话不多说，以下为步骤：安装nodejs安装vue-clinpminstall-gvue-clips:如果... 查看详情
vue-cli初始化创建vue2.9.6项目(代码片段)
阅读目录vue-cli安装vue-cli初始化创建项目1、vueinit命令讲解2、初始化创建项目package.json项目结构1、build目录（webpack配置）2、config目录（vue项目配置目录）3、node_modules（项目依赖包）src项目核心文件讲解项... 查看详情
vue-cli
#安装vue-clinpminstall-gvue-cli#使用vue-cli初始化项目vueinitwebpackmy-project#进入到目录cdmy-project#安装依赖npminstall#开始运行npmrundev 查看详情
vue-cli3.0初体验(代码片段)
...nbsp;npminstall-g@vue/cli 2.通过vue-V或vue--version检查版本三.初始化项目 1.初始化项目vuecreateproject<项目名> 注：如需使用旧版的vueini 查看详情
vue-cli2和cli3的使用和区别(代码片段)
...i上面安装的是vuecli3的版本，如果需要想按照vuecli2的方式初始化项目是不可以的，我们必须要拉取2.x的模板，需要安装全局的桥接工具(官方查看)VueCLI2初始化项目vueinitwebpackmy-projectVueCLI3初始化项目vuecreatemy-projectCLI2的使用初始化... 查看详情
使用vue脚手架(vue-cli)从零搭建一个vue项目(代码片段)
...始创建项目：找一个合适的位置，打开命令窗口，使用vue初始化基于webpack的新项目 vueinitwebpac 查看详情