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是项目名称，项目名称不能包含大写字母。

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

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

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

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

ESLint配置，选择默认选项

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

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

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

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

vue-cli3中基本的文件结构

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

首先是package.json:

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

还有就是vue-cli3独有的vue-cli插件，详细介绍参考vue-cli文档：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

这里我们在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