Vue.js 提供了一个官方命令行工具,可用于快速搭建大型单页应用。
相关网址:
菜鸟教程:http://www.runoob.com/vue2/vue-install.html
vue-cli官网:https://cli.vuejs.org/guide/creating-a-project.html
一. 目录结构:
二. 步骤总结:
这是在搭建过程中用到的6行命令,按顺序排列如下。
1.
cd /d E:\VueDemo
2.
cnpm install vue
3.
cnpm install --global vue-cli
4.
vue init webpack vuedemo
5.
cd vuedemo
6.
npm run dev
三.详细说明
接下来,我们就废话不多说,开始一步步搭建喽~
1.新建文件夹
用于存放你的项目,自己随便命名,命名最好有含义,方便你知道这是什么项目。在这里,我命名为VueDemo,文件夹路径为E:\VueDemo。
2.打开cmd命令行
输入以下命令,跳转到新建的文件目录下,如下图所示。
cd /d E:\VueDemo
3.安装vue
cnpm install vue
4.安装vue-cli
确保你有node和npm,这里不再细说。
cnpm install --global vue-cli
5.创建一个webpack项目并且下载依赖
输入以下命令之后,会有一些选项,均可设置为默认,每一选项直接Enter即可,如下图所示。选择完成之后会进行安装依赖,稍作等候。
vue init webpack vuedemo
安装依赖完成之后如下图所示,然后我们就可以运行下一步——运行项目了。
6.运行项目
输入以下两行命令,即为运行项目,如下图所示即为成功。最后显示的http://localhost:8080即为项目地址。
cd vuedemo
npm run dev
7.在浏览器中打开
成功执行以上命令后访问 http://localhost:8080/,输出结果如下图所示:
至此,项目搭建完成。