1.1、创建项目

这里使用命令行来创建项目,在工作文件下新建目录。

然后执行命令 vue init webpack demo-vue,这里 webpack 是以 webpack 为模板指生成项目,还可以替换为 pwa、simple 等参数,这里不再赘述。 demo-vue 是项目名称,也可以起别的名字。

在程序执行的过程中会有一些提示,可以按照默认的设定一路回车下去,也可以按需修改。

需要注意的是询问是否安装 vue-router,一定要选是,也就是回车或按 Y,vue-router 是构建单页面应用的关键。

image-20210116153944498

OK,可以看到目录下完成了项目的构建,基本结构如下。

image-20210116154257320

1.2、项目运行

使用VS code打开初始化完成的vue项目。

image-20210116160035620

在vs code 中点击终端,输入命令 npm run dev 或 npm run serve 运行项目。

image-20210116155515858

项目运行成功:

image-20210116155609488

访问地址:http://localhost:8080,就可以查看网页Demo。

image-20210116155800630

 

posted on 2021-04-07 23:43  开源包容  阅读(142)  评论(0编辑  收藏  举报