Vue-cli 环境配置

一，环境配置

1.安装npm；

2.安装vue-cli：npm install vue-cli -g

3.初始化项目：$ vue init <template-name> <project-name>

<template-name>：表示模板名称，vue-cli官方为我们提供了5种模板，

<project-name>：标识项目名称，这个你可以根据自己的项目来起名字。

 

输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。

• Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
• Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
• Author：作者，如果你有配置git的作者，他会读取。
• Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
• setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
• Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

4.cd vuecliTest进入目录

5.npm install

6.npm run dev

 

二，备忘

1.配置axios Ajax插件：

（1）npm 安装axios，文件根目录下安装，指令如下

npm install axios --save-dev

 

（2）修改原型链，在main.js中引入axios，接着将axios改写为Vue的原型属性

mport axios from 'axios'

Vue.prototype.$http=axios

 

（3）配置webpack解决跨域问题，统一请求域名

 

2.父组件传递属性值给子组件：

使用props：['name']接收，‘name’为属性名；

 

3.$ref,$chlidren,$parent详解：

https://blog.csdn.net/zhouzuoluo/article/details/81097339

 

4.子组件通过事件向父元素发送消息：

子组件：通过v-on:click="$emit('childrenFn')"监听子组件事件的触发

父组件：通过v-on:childrenFn="parentFn"接受子组件事件被触发的消息然后触发parentFn

 

$emit('childrenFn',params):$emit的第二参数是可以在监听到事件被触发后，向父组件抛出一个值，父组件通过$event访问到这个被抛出的值

 

5.配置路径：

-- 打开webpack.base.conf.js

-- 配置resolve下的alias即可