网络编程 
首页 > 网络编程 > 浏览文章

VUE项目初建和常见问题总结

(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )

拿猫眼为例:

步骤:

需要预装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"htmlcode">
cd maoyan 进入项目目录
npm run serve 启动服务

 

6. 重置样式

  • 5-1. 输入命令安装reset.css: npm install reset.css --save
  • 5-2. 在main.js文件中引入使用: import 'reset.css'

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 可自定义命令, 管理依赖包的版本号

以上就是本次介绍的全部知识点内容,感谢大家对的支持。

上一篇:JS计算斐波拉切代码实例
下一篇:TypeScript中使用getElementXXX()的示例代码
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap