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. 重置样式
- 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 可自定义命令, 管理依赖包的版本号
以上就是本次介绍的全部知识点内容,感谢大家对脚本之家的支持。
您可能感兴趣的文章:
- hightcharts项目中常见的问题总结
- Vue2.0总结———vue使用过程常见的一些问题
- vue2.0总结 --- vue使用过程中的常见问题
- 实施远程项目常见的问题及总结
- Vue2.0使用过程常见的一些问题总结学习
- vue老项目升级vue-cli3.0问题总结
- Vue2.0总结———vue使用过程常见的一些问题
- 有关使用Maven常见问题总结(Eclipse中使用Maven、Maven项目部署到tomcat等问题)
- 使用Vue框架开发商城mall项目中所遇到的问题及技术点总结
- doc---vue-cli脚手架项目问题总结(1)
- 有关使用Maven常见问题总结(Eclipse中使用Maven、Maven项目部署到tomcat等问题)
- [总结]vue开发常见知识点及问题资料整理(持续更新)
- vue开发常见问题总结
- 基于Vue.js的大型报告页项目实现过程及问题总结(二)
- vue项目中使用echarts 遇到问题总结2
- Unity5.x 项目升级过程中常见问题解决方案总结
- springboot+vue.js项目碰到的小问题总结
- 有关使用Maven常见问题总结(Eclipse中使用Maven、Maven项目部署到tomcat等问题)
- vue项目问题个人总结
- Vue项目中遇到的问题(总结)