使用vue新建项目(详解版)
npm安装
步骤一:安装nodejs
打开网站:http://nodejs.cn/download/
按照版本下载你需要的,这里以windows64安装程序为例子
![](https://img.haomeiwen.com/i14373290/f6a69036497d85f6.png)
双击打开刚才下载的【node-v10.11.0-x64】,什么都不用犹豫一直下一步直到安装完成
![](https://img.haomeiwen.com/i14373290/8ff81a19d03fc6ef.png)
快捷键:【windows键+R】输入cmd,打开控制台
![](https://img.haomeiwen.com/i14373290/998d53c3eca04a46.png)
查看node.js版本版本输入指令:【node -v】
![](https://img.haomeiwen.com/i14373290/e823e3b504c000f1.png)
查看npm版本输入指令:【npm -v】
如果不是最新版本也可以执行命令进行更新:【npm install -g npm】
![](https://img.haomeiwen.com/i14373290/359e785425deca7d.png)
使用淘宝npm镜像(国内使用官方的太慢了):
【npm install -g cnpm --registry=https://registry.npm.taobao.org】
![](https://img.haomeiwen.com/i14373290/bd9e1ddc8e2022c8.png)
步骤二:安装vue-cli
全局安装 vue-cli:【cnpm install vue-cli -g】
![](https://img.haomeiwen.com/i14373290/0a9bde883b45b683.png)
查看vue-cli是否成功:【vue list】(注意:此处检查vue-cli,是需要检查vue而不是vue-cli)
![](https://img.haomeiwen.com/i14373290/3828f22bdad7b7c8.png)
在开始常见项目之前我们要先选择路径:【cd 路径】
![](https://img.haomeiwen.com/i14373290/096497c1ea122491.png)
新建vue项目:【vue init webpack 项目名称】
这里我输入的是:【vue init webpack vue-demo01】
? Project name //这里再次输入你的项目名称,然后回车
? Project description (A Vue.js project) //这里写你的项目描述,然后回车
? Author //这是作者名称
? Vue build 打包方式,回车就好了
填写完作者后回车,会显示这样的如下信息,不要迷茫直接回车
![](https://img.haomeiwen.com/i14373290/16bf0f1af476e15a.png)
? 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
这些完成后直接回车就好
![](https://img.haomeiwen.com/i14373290/28be450f915f7578.png)
命令:cd project name //cd 进入你刚才建立的项目名目录。
![](https://img.haomeiwen.com/i14373290/fd3b2ce6d4f4a669.png)
切记一定要进入到你刚才创建项目的目录。
cnpm install // 初始化项目,安装依赖。
![](https://img.haomeiwen.com/i14373290/d1f4508259337e2a.png)
项目构建完成,输入【npm run dev】运行项目,自动打开默认浏览器显示页面。
![](https://img.haomeiwen.com/i14373290/38667890d6cf63ea.png)
在浏览器中输入:http://localhost:8080地址
![](https://img.haomeiwen.com/i14373290/0d1977afc598365b.png)
利用vue-cil搭建vue项目,我们会的得到一个初始化的文件结构
![](https://img.haomeiwen.com/i14373290/4d82c81ce2d6f3d3.png)
完成了,希望你能够继续学习下去。