拿猫眼为例:
步骤:
需要预装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. 重置样式
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 可自定义命令, 管理依赖包的版本号
以上就是本次介绍的全部知识点内容，感谢大家对脚本之家的支持。
