本文主要介绍了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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。