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


Posted in Javascript onSeptember 12, 2019

拿猫眼为例:

步骤:

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

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

Javascript 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 #Javascript
深入浅析vue中cross-env的使用
Sep 12 #Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 #Javascript
layer弹出层显示在top顶层的方法
Sep 11 #Javascript
layer.js之回调销毁对话框的例子
Sep 11 #Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 #Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 #Javascript
You might like
php学习 函数 课件
2008/06/15 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
写出高质量的PHP程序
2012/02/04 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Django分页功能的实现代码详解
2019/07/29 Python
Python hashlib模块实例使用详解
2019/12/24 Python
python3正则模块re的使用方法详解
2020/02/11 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
森林防火标语
2014/06/23 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
公司借款担保书
2015/09/22 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
Python合并pdf文件的工具
2021/07/01 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis