npm安装
步骤一:安装nodejs
打开网站:http://nodejs.cn/download/
按照版本下载你需要的,这里以windows64安装程序为例子

双击打开刚才下载的【node-v10.11.0-x64】,什么都不用犹豫一直下一步直到安装完成

快捷键:【windows键+R】输入cmd,打开控制台

查看node.js版本版本输入指令:【node -v】

查看npm版本输入指令:【npm -v】
如果不是最新版本也可以执行命令进行更新:【npm install -g npm】

使用淘宝npm镜像(国内使用官方的太慢了):
【npm install -g cnpm --registry=https://registry.npm.taobao.org】

步骤二:安装vue-cli
全局安装 vue-cli:【cnpm install vue-cli -g】

查看vue-cli是否成功:【vue list】(注意:此处检查vue-cli,是需要检查vue而不是vue-cli)

在开始常见项目之前我们要先选择路径:【cd 路径】

新建vue项目:【vue init webpack 项目名称】
这里我输入的是:【vue init webpack vue-demo01】
? Project name //这里再次输入你的项目名称,然后回车
? Project description (A Vue.js project) //这里写你的项目描述,然后回车
? Author //这是作者名称
? Vue build 打包方式,回车就好了
填写完作者后回车,会显示这样的如下信息,不要迷茫直接回车

? Install vue-router? (Y/n) 是否安装vue-router,这是官方的路由,大多数情况下都使vue-router官网 。这里就输入“y”后回车即可。
? Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行,这也是为了多人协作,新手就不用了,输入'n'后回车。
? Set up unit tests (Y/n) 设置单元测试,这里你可以选择n
? Setup e2e tests with Nightwatch? E2E测试,选择n
这些完成后直接回车就好

命令:cd project name //cd 进入你刚才建立的项目名目录。

切记一定要进入到你刚才创建项目的目录。
cnpm install // 初始化项目,安装依赖。

项目构建完成,输入【npm run dev】运行项目,自动打开默认浏览器显示页面。

在浏览器中输入:http://localhost:8080地址

利用vue-cil搭建vue项目,我们会的得到一个初始化的文件结构

完成了,希望你能够继续学习下去。
网友评论