美文网首页
Vue3的学习

Vue3的学习

作者: 汶沐 | 来源:发表于2019-08-08 14:50 被阅读0次

    全局安装脚手架:(v3 需要Node.js 8.9+版本)

    npm install -g @vue/cli
        or
    yarn global add @vue/cli
    

    vue create创建新项目:

    vue create project-name
    

    上面命令行执行后,会出现一个特性选择,这时候按自身需要来选择就好。
    运行项目:

    npm run serve
    or
    yarn serve
    

    打包项目:

    npm run build
    

    拉取2.x模板##

    因为cli 3的脚手架会覆盖cli 2,如果需要用到旧版本的,就要全局安装一个桥接工具:

    npm install -g @vue/cli-init
    //这样就可使用2.x的模板
    vue init webpack project-name
    

    由于3.x的webpack相关配置都放到脚手架的依赖里了,如果想像2.x那样配置webpack相关的,可以在package.json同级下创建 vue.config.js,在里面进行相关配置,下面是一个简单的配置模板:

    module.exports = {
        publicPath: process.env.NODE_ENV === 'production'
            ? '/production-sub-path/'
            : './',//根路径 从 Vue CLI 3.3 起,baseUrl已弃用,publicPath代替
        outputDir:'dist',//打包的时候生成的一个文件名
        assetsDir:'assets',//静态资源目录(js,css,img,fonts)这些文件都可以写里面
        lintOnSave:false,//是否开启eslint保存检测 ,它的有效值为 true || false || 'error'
        devServer:{
            open:true,//启动项目后自动开启浏览器
            host:'192.168.0.2',//对应的主机名
            port:8081,//端口号
            https:false,//是否开启协议名,如果开启会发出警告
            hotOnly:false,//热模块更新的一种东西,webpack中自动有过配置,但如果我们下载一些新的模块可以更好的给我更新一些配置
            /*proxy:{
                //配置跨域
                '/api':{//配置跨域的名字
                    target:'http//localhost:5000/api',//跨域的地址
                    ws:true,
                    changOrigin:true,//是否跨域
                    pathRewrite:{//当前的名字
                        '^/api':''
                    }
                }
    
            }*/
    
        }
    };
    

    相关文章

      网友评论

          本文标题:Vue3的学习

          本文链接:https://www.haomeiwen.com/subject/tjkxjctx.html