VUE项目构建与运行

港控/mmm° 2023-06-14 04:15 19阅读 0赞

## 1.基础环境 ##

首先是安装npm，从nodejs.org（[https://nodejs.org/en/][https_nodejs.org_en]）中下载nodejs进行双击安装即可，安装完成可以通过cmd命令node -v和mpm -v检查是否安装成功，如果能显示版本号则表示安装成功。但是国内直接使用npm的官方镜像是非常慢的，这里推荐使用淘宝npm镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后就需要安装vue-cli：

cnpm install -g vue-cli   //全局安装vue-cli

可以通过cmd命令vue list检查vue-cli安装成功与否，vue-cli提供了几个模板给开发者用于不同类型的项目，一般我们用webpack和webpack-simple的比较多，其他几种，大家可以去官网了解下具体用法。

## 2.项目构建 ##

选定某个路径，例如我这有个project文件夹，通过cmd命令cd project进入该目录，假设这里构建名称为demo的VUE项目，通过vue init webpack demo(项目名称)命令即可，然后会出现一些命令行让回答y或n，这个时候这样：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppc3VhbmppZ3VvYmE_size_16_color_FFFFFF_t_70][]

## 3.项目运行 ##

安装好之输入这样的命令行：

1) cd demo
    2) cnpm run dev

启动完项目，直接在浏览器输入默认访问地址就可以了，如下图所示：

![format_png][]

如果使用的是WebStorm，快速启动Vue项目可以进行如下配置：

①点击右上角，添加npm配置：

![format_png 1][]

②点击加号，选择npm：

![format_png 2][]

③命名并且填写运行命令：

![format_png 3][]

④可以看到控制台出现运行：

![format_png 4][]

⑤点击绿色按钮，可以看到启动了端口：

![format_png 5][]

⑥在弹出的默认的浏览器里面，可以看到项目：

![format_png 6][]

[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppc3VhbmppZ3VvYmE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191118145809990.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppc3VhbmppZ3VvYmE=,size_16,color_FFFFFF,t_70
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTMyOTk2NS0yOTQ3MzZmZjc0MzAzMDcwLnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTBhODU3MjkxNzZhMzIxODAucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWFlZDcxNjJkNWNiOWExMzcucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTEyZTJjODJhZDM1ZDQ5YzMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTA3Ny9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTEyZDI0NzRkOGExZjcyM2YucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTVmZTQ3YjU2NjQ3NDE3M2EucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWI3YmRiZWM3NjViZTY0NWMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png