搭建vue框架项目遇到的问题和过程

最新推荐文章于 2024-04-29 12:10:51 发布

new-lijiabin

最新推荐文章于 2024-04-29 12:10:51 发布

阅读量611

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/lijiabinbbg/article/details/107065129

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

https://jspang.com/detailed?id=26#toc28 （技术胖）

我们用vue init命令来初始化项目，具体看一下这条命令的使用方法。

$ vue init <template-name> <project-name>

init：表示我要用vue-cli来初始化项目

<template-name>：表示模板名称，vue-cli官方为我们提供了5种模板，

webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。

-simple-一个最简单的单页应用模板。

<project-name>：标识项目名称，这个你可以根据自己的项目来起名字。

在实际开发中，一般我们都会使用webpack这个模板，那我们这里也安装这个模板，在命令行输入以下命令：

vue init webpack vuecliTest

输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。

Project name :项目名称，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：作者，如果你有配置git的作者，他会读取。
Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

https://blog.csdn.net/m0_37605642/article/details/90437925（scss在Vue中的安装及使用）

一、安装
npm install node-sass --save-dev //安装node-sass
npm install sass-loader --save-dev //安装sass-loader
npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！
二、配置文件
在webpack.base.conf.js 文件下的配置 rules
rules:[
...
{ //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别scss!
test: /\.scss?$/,
loaders: ["style", "css", "sass"]
}
]

在webpack.base.conf.js 文件下的配置 rules

三、在vue模板组件中引用lange="scss"
<style lang="scss" scoped>
...
</style>
style中引入

https://blog.csdn.net/ze1024/article/details/100516650 （vue安装node-sass编译报错）

这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下，找到package.json文件，里面的 "sass-loader"的版本更换掉就行了。

我本地是将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",

vue中使用scss时报错（Module build failed: TypeError: this.getResolve is not a function at Object.）

sass-loader版本过高

1.先卸载当前版本npm uninstall sass-loader

2.再安装 npm install sass-loader@7.3.1 --save-dev

https://www.jianshu.com/p/e5b9ed2107d7 (最全Vue框架整理从基础到实战(三))

https://blog.csdn.net/qq_40128367/article/details/82735310 在vue项目中：统一封装 Axios 接口与异常处理

https://www.jianshu.com/p/2e5973fe1223 VueX（Vue状态管理模式) 将store挂载到当前项目的Vue实例当中去

https://segmentfault.com/a/1190000007535316 理解 JavaScript 的 async/await

https://www.jianshu.com/p/c45974292915 VUE如何封装一个组件

https://blog.dbsgw.cn/post-179.html 大数据量性能优化

「前端进阶」高性能渲染十万条数据(虚拟列表)

https://blog.csdn.net/qq_37818095/article/details/102954854?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-10.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-10.nonecase

Vue-router vue路由 https://jspang.com/detailed?id=25

vue编程式导航，页面传参 https://www.cnblogs.com/ygyy/p/10303754.html

解决VUE项目重复点击菜单报错：Avoided redundant navigation to current location: “/xxxxx“. 问题

https://blog.csdn.net/weixin_42288182/article/details/107287172?%3E

Vue keepAlive 页面缓存

https://zhuanlan.zhihu.com/p/54822855

https://www.cnblogs.com/smart-girl/p/10496769.html

在Vue中使用echarts

https://www.jianshu.com/p/cf0a54374419

echarts官方示例 https://echarts.apache.org/examples/zh/index.html#chart-type-pie

Vue 爬坑之旅--嵌套路由默认选中第一个子路由，并且主路由和子路由都处于激活状态

https://blog.csdn.net/zgh0711/article/details/79716506

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
搭建vue框架项目遇到的问题和过程

https://jspang.com/detailed?id=26#toc28（技术胖）我们用vue init命令来初始化项目，具体看一下这条命令的使用方法。$ vue init <template-name> <project-name>init：表示我要用vue-cli来初始化项目<template-name>：表示模板名称，vue-cli官方为我们提供了5种模板， webpack-一个全面的webpack+vue-loader的模板，功能包.
复制链接

扫一扫