这篇文章将为大家详细讲解有关Vue项目初建和常见问题有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。拿猫眼为例:步骤:需要预装node.js1. 查看node版本,控
这篇文章将为大家详细讲解有关Vue项目初建和常见问题有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
拿猫眼为例:
步骤:
需要预装node.js
1. 查看node版本,控制台输入
node -v
v10.16.1
2. 查看vue版本
vue -V (Vue不是内部或外部命令...)--执行步骤3
3. 安装@vue/cli脚手架
npm i -g @vue/cli
4. 创建新项目
vue create maoyan
1.Please pick a preset:
Manually select features
Check the features needed for your project:(上下键移动, 空格键选择, 选完之后按回车确定)
Babel Router Vuex CSS Pre-processors
Use history mode for router?
y
Pick a CSS pre-processor
Sass/SCSS(width node-sass)
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
In package.JSON
5. 进入项目目录下, 并启动服务
cd maoyan 进入项目目录
npm run serve 启动服务
6. 重置样式
7. 获取数据时, 需要先设置代理进行跨域
7-1. 新建vue.config.js文件, 配置代理
module.exports = {
devServer: { //使用WEB服务器启动
port: 8888, //指定端口号
proxy: { //设置代理(解决跨域)
"/ajax": {
target: "Http://m.maoyan.com",
changeOrigin: true
}
}
},
}
7-2. 使用axiOS进行数据获取(axios是对ajax进行封装的插件)
7-2-1. 安装: npm i axios -S
7-2-2. 在main.js文件中引入: import axios from 'axios'
7-2-3. 在main.js文件中, 将axios声明到Vue的原型使用: Vue.prototype.$http = axios
7-2-4. 获取数据: this.$http.get(url)
报错问题:
1.These dependencies were not defined 下面这些依赖找不到
可能出现的情况分为两种:
a. 本地文件路径写错了
@/components/comon/header.vue in ./node_module........
解决: 对应报错, 排查路径问题(查看在哪些文件引入了header.vue文件, 路径在哪个文件中写错了)
@/components/commons/header.vue
b. 需要通过npm安装的依赖没有安装, 直接引用
axios in ./src/main.js is not defined
解决: 对应报错, 查看package.json文件, 看是否安装过此依赖
b-1. 如package.json存在该依赖, 则可能是由于网络原因, 丢包了
删除node_modules文件夹, 重新npm i 进行安装依赖
b-2. 如package.json不存在该依赖, 则重新安装
npm i axios -S
项目结构:
maoyan
--dist 打包后的文件夹
--node_modules 所有依赖包管理
--public 图标和index.html页面(为了写vue实例挂载的容器)
--src 管理所有资源
--assets 图标,图片,静态资源
--components 写组件
--style 存放css文件
--views 写页面
App.vue 应用的主组件(将首页内容渲染到挂载节点)--详情见main.js[通过渲染函数渲染App.vue, 挂载到#app]
main.js 相当于webpack的入口文件, 在此管理所有的引入, 全局可使用
router.js 配置路由(所有需要进行路由配置的组件, 需要通过import先引入进来)
store.js vuex状态管理器
.gitignore 上传git仓库时配置需要被忽略的文件
babel.config.js 将ES高版本转为ES5
package.json 可自定义命令, 管理依赖包的版本号
关于“VUE项目初建和常见问题有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
--结束END--
本文标题: VUE项目初建和常见问题有哪些
本文链接: https://www.lsjlt.com/news/76404.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0