VUE项目初建和常见问题总结
拿猫眼为例:
步骤:
需要预装node.js
1.查看node版本,控制台输入
node-v v10.16.1
2.查看vue版本
vue-V(Vue不是内部或外部命令...)--执行步骤3
3.安装@vue/cli脚手架
npmi-g@vue/cli
4.创建新项目
vuecreatemaoyan 1.Pleasepickapreset: Manuallyselectfeatures Checkthefeaturesneededforyourproject:(上下键移动,空格键选择,选完之后按回车确定) BabelRouterVuexCSSPre-processors Usehistorymodeforrouter? y PickaCSSpre-processor Sass/SCSS(widthnode-sass) WheredoyoupreferplacingconfigforBabel,PostCSS,ESLint,etc.?(Usearrowkeys) Inpackage.json
5.进入项目目录下,并启动服务
cdmaoyan进入项目目录 npmrunserve启动服务
6.重置样式
- 5-1.输入命令安装reset.css:npminstallreset.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.安装:npmiaxios-S
7-2-2.在main.js文件中引入:importaxiosfrom'axios'
7-2-3.在main.js文件中,将axios声明到Vue的原型使用:Vue.prototype.$http=axios
7-2-4.获取数据:this.$http.get(url)
报错问题:
1.Thesedependencieswerenotdefined下面这些依赖找不到
可能出现的情况分为两种:
a.本地文件路径写错了
@/components/comon/header.vuein./node_module........
解决:对应报错,排查路径问题(查看在哪些文件引入了header.vue文件,路径在哪个文件中写错了)
@/components/commons/header.vue
b.需要通过npm安装的依赖没有安装,直接引用
axiosin./src/main.jsisnotdefined
解决:对应报错,查看package.json文件,看是否安装过此依赖
b-1.如package.json存在该依赖,则可能是由于网络原因,丢包了
删除node_modules文件夹,重新npmi进行安装依赖
b-2.如package.json不存在该依赖,则重新安装
npmiaxios-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.jsvuex状态管理器
.gitignore上传git仓库时配置需要被忽略的文件
babel.config.js将ES高版本转为ES5
package.json可自定义命令,管理依赖包的版本号
以上就是本次介绍的全部知识点内容，感谢大家对毛票票的支持。