Vue3的学习

2019-08-08  本文已影响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':''
                }
            }

        }*/

    }
};
上一篇下一篇

猜你喜欢

热点阅读