vuecli怎么查看版本,vue-cli最新版本,vue项目查看vue版本及cli版本的实现方式

vuecli怎么查看版本,vue-cli最新版本,vue项目查看vue版本及cli版本的实现方式

本文主要介绍了vue项目的实现来查看vue版本和cli版本,具有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。

查看cli版本,执行如下:

vue -V

查看vue版本

npm列表vue

补充知识:vue老项目升级vue-cli3.0问题总结

升级步骤

1.删除原来的vue-cli,安装vue-cli3.0。

2.删除新项目中src下的内容,将原项目中的src目录覆盖到新项目中。

3.将router从目录文件夹更改为文件,并将src/router/index.js提升一级,成为src/router.js

4.在我的项目中,src已经被划分为视图和组件,所以不需要修改它。如果不是这个结构,就需要自己去分辨了。

5.向新项目的公众覆盖原项目的index.html和favicon.ico。

6.将原始项目的静态文件夹复制到新项目的公共文件夹中。

7.修改package.json文件,使其与原始项目保持一致。

8.创建并配置文件vue.config.js

删除命令:

npm卸载vue-cli -g

安装@vue/cli命令:

npm安装-g @vue/cli

这里省略安装过程。已经有很多关于掘金的文章了。接下来会发生什么:

1、找不到vue文件

CMD中的错误

找不到这些依赖项:

* @/views/index/index in。/src/router.js

* @/views/index/otherIndex in。/src/router.js

要安装它们,您可以运行:NPM install-save @/views/index/index @/views/index/other

第页的错误报告。/src/router.js

找不到模块:

错误:无法解析“D:\ VUE \海归-代理\src”中的“@/views/index/index”

此错误表明文件路径错误,找不到文件。因为“@”是在原项目中设置的,即别名,或者原项目中可能设置了扩展名(扩展名可以省略),所以需要在新项目的vue.config.js中设置以下内容:

const path=require(' path ');//vue.config.js top

const resolve=(dir)=path . join(_ _ dirname,dir);

模块.导出={

configureWebpack: config={

Object.assign(配置,{

解决:{

扩展名:['。js ','。vue ','。json'],//后缀可以省略。

Alias: {//Alias,可以在需要的时候用来缩短路径的长度。

@': path.resolve(__dirname,'。/src '),

@c': path.resolve(__dirname,'。/src/components’)

}

}

});

}

}

2、找不到image图片

找不到模块:

错误:无法解析'./././static/image/avatar _ gray . jpg ' in ' D:\ VUE \海归-proxy\src\views\index '

当原项目的src和static复制到新项目时,会出现镜像路径不正确的问题。网上很多关于vue-cli3.0配置的文章都说直接把原项目的静态复制到新项目的公有。其实这是不对的。官方理由是:

放置在公共文件夹中的任何静态资源将被简单地复制,而不经过webpack。您需要绝对路径来引用它们。

例如,目录是public/static/image,其中存储了各种图片:

引入图片logo.png:

img src='/static/image/logo.png '

在 css 中 设置背景图片:。血糖

背景:URL('/satic/image/BG . jpg ');

}

注意:

公共目录提供了一种应急措施。当您通过绝对路径引用它时,请注意应用程序将被部署到哪里。如果您的应用程序没有部署在域名的根,那么您需要为您的URL配置publicPath前缀。

何时使用公共文件夹

您需要在生成输出中指定文件名。

你有成千上万的图片,需要动态引用它们的路径。

有些库可能与webpack不兼容,因此您别无选择,只能用单独的标签介绍它们。

通过 webpack 的处理好处:

脚本和样式表将被压缩和打包在一起,从而避免了额外的网络请求。

文件丢失将在编译时直接报告错误,而不是在客户端生成404错误。

生成的文件名包含内容哈希,因此您不必担心浏览器会缓存它们的旧版本。

公共目录提供了一种应急措施。当您通过绝对路径引用它时,请注意应用程序将被部署到哪里。

assets文件夹用于放置由webpack处理的资源。

需要使用相对路径引入:

!-根据目录结构-

img src='./assets/images/徽标-black.png '

Img动态路径:

img :src='imgurl '

data () {

返回{

imgurl:要求('./assets/images/gou.png ')

}

}

css的背景图像:登录包装器{

背景:url('././assets/images/BG . jpg ');

}

参考:官方解释

3、scss全局变量的配置

模块构建失败(来自。/node _ modules/sass-loader/lib/loader . js):

未定义的变量。955

border-right:1px solid $ border color;

^^^^^^^^^^^^

D:\ VUE \海归-proxy \ src \ views \ index \ index . vue中的根样式表(第955行,第33列)

如果原项目中使用了scss和全局变量,需要在vue.config.js中重新配置,全局变量文件要放在src/assets/css目录下。

在原始项目中,它需要在build/utils.js中进行配置

scss: generateLoaders('sass ')。串联(

{

加载程序:' sass-resources-loader ',

选项:{

resources:path . resolve(_ _ dirname,'./src/assets/CSS/haigui-variable . scss ')

}

}

)

新项目简单多了。直接编辑vue.config.js加一节就行了:

css: {

loaderOptions: {

萨斯:{

//@/是src/的别名

数据:' @ import ' ~ @/assets/CSS/haigui-variable ';'

//如果没有设置别名,可以这样写。

//数据:“@import”。/src/assets/CSS/haigui-variable ';'

}

}

}

4、runtime-only

在模板编译器不可用的情况下,您使用的是Vue的仅运行时版本。要么将模板预编译成渲染函数,要么使用编译器附带的构建。

原因:

Vue有两种形式的代码编译器(模板)模式和运行时模式(运行时)。vue模块的package.json主字段默认为运行时模式,指向' dist/vue.runtime.common.js '的位置。

这是vue升级到2.0后就有的功能。

但是在main.js文件中,初始化vue是这样写的,是编译器模式,所以会出现上面的错误信息。

新Vue({

埃尔:' #app ',

路由器,

店,

组件:{ App },

模板:“应用程序/”

});

解决办法:

方法一:

只需如下修改main.js中的代码

新Vue({

路由器,

店,

render: h=h(App)

}).$ mount(“# app”)

我们这里的问题还没完,为什么之前没有问题?之前的vue版本也是2.x?

这也是第二种解决办法:

因为以前在我们的webpack配置文件中有单独的名称配置,如下所示

解决:{

别名:{

Vue$': 'Vue/dist/vue.esm.js' //里面是正则表达式vue的结尾。

}

}

也就是说,import vue from' vue '的代码解析为import vue from ' vue/dist/vue . ESM . js ',直接指定文件的位置,不使用main字段的默认文件位置。

因此,第二种解决方案是将webpack的以下配置添加到vue.config.js文件中,

configureWebpack: {

解决:{

别名:{

vue$': 'vue/dist/vue.esm.js '

}

}

}

既然到了这里,你会想到第三种解决方案,就是在引用vue的时候,就写成这样

从“vue/dist/vue.esm.js”导入Vue

以上vue项目的vue版本和cli版本的实现都是边肖分享的内容。希望能给你一个参考,多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: