vue 使用图形向导来创建 vue 项目

青旅半醒 2024-03-25 10:05 54阅读 0赞

### 1、安装脚手架 ###

*  \-g 参数表示全局安装，这样在任意目录都可以使用 vue 脚本创建项目

npm install -g @vue/cli

### 2、创建项目 ###

*  在目录下执行命令

vue ui

*  使用图形向导来创建 vue 项目，如下图，输入项目名

![在这里插入图片描述][7723b0740dd54f2bb58d2e466cdd4506.png]![在这里插入图片描述][3a236642970b4959af18bd401c9bba7a.png]

*  选择手动配置项目  
    ![在这里插入图片描述][dc2ae4b893cd4658a5315db0c026449e.png]
 *  添加 vue router 和 vuex  
    ![在这里插入图片描述][6d77fe3c6d77416c8d85876e81efe92f.png]
 *  选择版本  
    ![在这里插入图片描述][29fe8513e4c84b40b4a0ed02acc86d25.png]

### 3、安装 devtools ###

devtools 插件网址：[https://devtools.vuejs.org/guide/installation.html][https_devtools.vuejs.org_guide_installation.html]  
![在这里插入图片描述][fd026b0fd7b74560a62f07deb2665835.png]![在这里插入图片描述][36430bb2bd564d3f99b57e43137534d1.png]

![在这里插入图片描述][8435f027b9074d83b1738515f92e0785.png]

### 4、启动项目 ###

*  进入创建的项目目录  
    ![在这里插入图片描述][f99f6fb03165475098d8e7d1b690e196.png]![在这里插入图片描述][dcc47bc2c3144f26bc808d32117a4638.png]
 *  运行项目

npm run serve

![在这里插入图片描述][a5a4f8e65adc4cd6b6599f3d84af15d5.png]

*  进入项目首页  
    ![在这里插入图片描述][e073e99fa47a48f58bab5d9936bf03e6.png]

### 5、修改端口号 ###

前端服务器默认占用了 8080 端口，需要修改一下

文档地址：[https://webpack.js.org/configuration/dev-server/\#devserverport][https_webpack.js.org_configuration_dev-server_devserverport]

*  打开 vue.config.js 添加

devServer: {
        
        port: 8088,
    },

![在这里插入图片描述][27af0de18c834141b3fd86830c14a534.png]

*  重新启动  
    ![在这里插入图片描述][398bb6bce5cb45ab955786e9859c94fe.png]![在这里插入图片描述][46915b81ec3540aabc9b5c846410c820.png]

### 6、配置代理 ###

为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理。

*  打开 vue.config.js 添加

proxy: {
        
       '/api': {
        
          //后端接口
          target: 'http://localhost:8080',
          changeOrigin: true,
        },
    },

结束！！！！！！！

--------------------

“孩子们，这就是人生——人生就是一次无法重复的选择，”，面对无法回头的人生，我们只能做三件事：郑重的选择，争取不留下遗憾；如果遗憾了，就理智的面对它，然后争取改变；假若也不能改变，就勇敢地接受，不要后悔，继续朝前走。--苏格拉底

[7723b0740dd54f2bb58d2e466cdd4506.png]: https://img-blog.csdnimg.cn/7723b0740dd54f2bb58d2e466cdd4506.png
[3a236642970b4959af18bd401c9bba7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/54c64f4cc437459a9f20b26e0bb13c62.png
[dc2ae4b893cd4658a5315db0c026449e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d6167855232b430eba1a280a360b54b3.png
[6d77fe3c6d77416c8d85876e81efe92f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/cadd05193a4943a28821b339463d9f5b.png
[29fe8513e4c84b40b4a0ed02acc86d25.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/57381db5c16a4974bb99fd9b8bbbe6db.png
[https_devtools.vuejs.org_guide_installation.html]: https://devtools.vuejs.org/guide/installation.html
[fd026b0fd7b74560a62f07deb2665835.png]: https://img-blog.csdnimg.cn/fd026b0fd7b74560a62f07deb2665835.png
[36430bb2bd564d3f99b57e43137534d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/00ae891567fc46e5843d788762b5e93d.png
[8435f027b9074d83b1738515f92e0785.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/daccb557f79a4e2d9a31c98b74e356f7.png
[f99f6fb03165475098d8e7d1b690e196.png]: https://img-blog.csdnimg.cn/f99f6fb03165475098d8e7d1b690e196.png
[dcc47bc2c3144f26bc808d32117a4638.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f86c6ed307d84f2dbf10f265439a7522.png
[a5a4f8e65adc4cd6b6599f3d84af15d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/95a76f5371ac425eaee93f95d35af7f8.png
[e073e99fa47a48f58bab5d9936bf03e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d763fb2917284b89929799432720a58d.png
[https_webpack.js.org_configuration_dev-server_devserverport]: https://webpack.js.org/configuration/dev-server/#devserverport
[27af0de18c834141b3fd86830c14a534.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/faa98b4ccd434f14abf94f09b7717080.png
[398bb6bce5cb45ab955786e9859c94fe.png]: https://img-blog.csdnimg.cn/398bb6bce5cb45ab955786e9859c94fe.png
[46915b81ec3540aabc9b5c846410c820.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6ab499e269d04ba3b4170643532a0a5a.png