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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
js常用排序实现代码
Dec 28 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
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 无法载入mysql扩展
2010/03/12 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
详细介绍Python中的偏函数
2015/04/27 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
python实现打砖块游戏
2020/02/25 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
道德演讲稿
2014/05/21 职场文书
品牌推广策划方案
2014/05/28 职场文书
新农村建设标语
2014/06/24 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
九华山导游词
2015/02/03 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
MySQL sql模式设置引起的问题
2022/05/15 MySQL