1,首先要安装node.js(这是windows系统),
https://nodejs.org/en/download/
判断node是否安装成功在小黑框里,输入node -v
![](https://img.haomeiwen.com/i2259539/bc0c54516df27718.png)
如图所示便成功了(有显示版本号);
2,安装vue-cli;
npm install -g vue-cli
检验是否成功的
![](https://img.haomeiwen.com/i2259539/6b6263bcfba0548a.png)
3,找到指定的文件夹创建项目
![](https://img.haomeiwen.com/i2259539/91524d850324f367.png)
vue init 模板 项目名
在这介绍一下常用模板
1)webpack-simple 小型项目推荐使用,没有 Eslint 代码检查
2)webpack 大型项目推荐使用 可选择是否安装Eslint代码检查
ps:初学者建议不要安装Eslint,因为这玩意会处处针对你,让你的代码要写规范
这里演示模板webpack项目搭建
![](https://img.haomeiwen.com/i2259539/b2fcdef33daf6533.png)
接着就会出现这个,蓝色字体的 有的输入的,有的是选择的
![](https://img.haomeiwen.com/i2259539/d1ccc03fdfaf95e1.png)
打开文件夹会发现这里有个刚刚创建的项目
![](https://img.haomeiwen.com/i2259539/9a4ff07b3d5ca08b.png)
4,安装项目依赖
在小黑框里将路径跳转到刚刚创建的项目里
![](https://img.haomeiwen.com/i2259539/e193f0d9de840651.png)
输入npm install
接着就会开始下载依赖,下载的过程比较慢,因为npm的服务器在国外,所以慢慢等吧
![](https://img.haomeiwen.com/i2259539/d6e7db4cd11ef52d.png)
这样便安装成功了。
在开发工具中打开项目,项目结构如下
![](https://img.haomeiwen.com/i2259539/43bc17349aeabd10.png)
5,运行项目
在小黑框输入
npm run dev
不出啥意外的话,会呈现这种效果
![](https://img.haomeiwen.com/i2259539/c980f45fa87126c2.png)
网友评论