vue-cli3通过命令行搭建基本项目框架

青旅半醒 2023-02-15 12:52 44阅读 0赞

## vue-cli3基本项目框架搭建 ##

**目录**

首先安装vue-cli3环境

创建vue-cli3基本项目结构

vue-cli3中基本的文件结构

配置项的修改

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

vue-cli3出来也有一段时间了，但是很多老项目还是用的vue-cli2的结构，最近想折腾一下自己搭一个vue-cli3的前端项目基础框架，也是记录一下吧。

### 首先安装vue-cli3环境 ###

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

npm install -g @vue/cli

安装成功后使用：

vue --version

命令来检查所安装的对应版本

### 创建vue-cli3基本项目结构 ###

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

使用cd命令，到对应的项目文件夹下面，或者在文件夹下，按住shift+鼠标右键，选择**在此处打开PowerShell窗口，**或者**在此处打开命令行窗口。**

运行以下命令来创建一个新项目：

vue create hello-world

其中：hello-world是项目名称，项目名称不能包含大写字母。

![20190712152838707.png][]

我们选择第二个，因为一般项目中都会用到vue-router以及vuex,以及其他的一些自定义配置；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU_size_16_color_FFFFFF_t_70][]

使用babel,router,vuex,css预编译，格式化校验。

![20190712153136818.png][]

输入y，回车，使用history模式，也可以根据具体的需要，选择。

![20190712153241239.png][]

这里我们使用node-sass来编译scss/sass，也可以根据具体情况选择

![20190712153417566.png][]

ESLint配置，选择默认选项

![2019071215351590.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU_size_16_color_FFFFFF_t_70 1][]

这些插件的配置方式，我用的是默认的配置文件。

![20190712153734526.png][]

以后是否使用这个配置，根据实际情况来选择，我们先选择n。

![20190712153833831.png][]

然后等待模板下载，文件生成。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU_size_16_color_FFFFFF_t_70 2][]

到这里基本的文件模板就已经生成完成。

### vue-cli3中基本的文件结构 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU_size_16_color_FFFFFF_t_70 3][]

他的整个文件结构，基本上跟vue-cli2还是保持一致的，但是少了一个config文件夹，对于我们开发的时候来说，就关心几个点，router,propxyTable,以及package.json。

首先是package.json:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU_size_16_color_FFFFFF_t_70 4][]

首先一个，最大的区别就是我们的启动命令，从以前的npm run dev ，变成了npm run serve。

还有就是vue-cli3独有的vue-cli插件，详细介绍参考vue-cli文档：[https://cli.vuejs.org/zh/dev-guide/plugin-dev.html][https_cli.vuejs.org_zh_dev-guide_plugin-dev.html]

@vue/cli- xxx 开头的就是vue-cli的插件。

### 配置项的修改 ###

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

既然可以启动服务了，那么我们启动服务的端口，访问API的后台代理在哪里配置？

vue-cli3的配置详情可以参考vue-cli文档：[https://cli.vuejs.org/zh/config/\#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE][https_cli.vuejs.org_zh_config_E5_85_A8_E5_B1_80-cli-_E9_85_8D_E7_BD_AE]

这里我们在package.json同级目录下新建文件：vue.config.js

module.exports = { 
        devServer: { 
            port: 8088, // 端口号
            host: "localhost",
            https: false, // https:{type:Boolean}
            open: false, //配置自动启动浏览器
            // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
            proxy: { 
                "/api": { 
                    target: "<url>",
                    ws: true,
                    changeOrigin: true
                },
                "/foo": { 
                    target: "<other_url>"
                }
            } // 配置多个代理
        },
        lintOnSave: false // 关闭eslint代码检查
    };

粘贴代码，并根据需要改变配置选项。

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

至此，基本的vue-cli项目已创建完毕，下一篇文章会讲关于第三方插件库的引用，vuex和vue-router的结构化调整，优化，axios的引入和封装。

转载地址：  
[https://blog.csdn.net/ttuuyyu/article/details/95621617][https_blog.csdn.net_ttuuyyu_article_details_95621617]

[20190712152838707.png]: https://img-blog.csdnimg.cn/20190712152838707.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190712153009657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU=,size_16,color_FFFFFF,t_70
[20190712153136818.png]: https://img-blog.csdnimg.cn/20190712153136818.png
[20190712153241239.png]: https://img-blog.csdnimg.cn/20190712153241239.png
[20190712153417566.png]: https://img-blog.csdnimg.cn/20190712153417566.png
[2019071215351590.png]: https://img-blog.csdnimg.cn/2019071215351590.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190712153550759.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU=,size_16,color_FFFFFF,t_70
[20190712153734526.png]: https://img-blog.csdnimg.cn/20190712153734526.png
[20190712153833831.png]: https://img-blog.csdnimg.cn/20190712153833831.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190712153917104.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190712154841978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190712155419923.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dXV5eXU=,size_16,color_FFFFFF,t_70
[https_cli.vuejs.org_zh_dev-guide_plugin-dev.html]: https://cli.vuejs.org/zh/dev-guide/plugin-dev.html
[https_cli.vuejs.org_zh_config_E5_85_A8_E5_B1_80-cli-_E9_85_8D_E7_BD_AE]: https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
[https_blog.csdn.net_ttuuyyu_article_details_95621617]: https://blog.csdn.net/ttuuyyu/article/details/95621617