使用vue-cli新建项目,快速搭建大型单页应用

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

确保你有nodenpm,这里不再细说。

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/,输出结果如下图所示:

至此,项目搭建完成。

猜你喜欢

转载自blog.csdn.net/Dora_5537/article/details/87918022