前端小经验1

首先创建一个vue.config.js

1.跨域请求配置

module.exports = {

    devServer: {

        proxy: {

            '/ele':{

                target:"https://h5.ele.me",

                ws:false,

                changeOrigin:true,

                pathRewrite:{

                    "^/ele":""

                },

                // cookieDomainRewrite转发请求的过程中将cookie也进行转发

                cookieDomainRewrite:{

                    "*":"127.0.0.1"

                }

            }

}

2.合并vux-ui，vux-loader

configureWebpack: config => {

        require('vux-loader').merge(config, {

            options: {},

            plugins: ['vux-ui']

        })

    }

3.项目打包配置

module.exports = {

     //部署应用包时的基本 URL

    publicPath: process.env.NODE_ENV === 'production' ? '/' : './',

    //当运行 vue-cli-service build 时生成的生产环境构建文件的目录

    outputDir: 'dist',

    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录

    assetsDir: 'assets'

}

4.vue2脚手架

1.进入项目保存目录，执行vue init webpack xxx项目名

2.根据项目创建提示填写信息

3.cd 进入创建的项目目录 执行 npm install

4.使用Hbuilder打开项目，修改build目录下webpack.base.conf.js配置

5.命令行工具执行下载命令：

npm install vux --save

npm install vux-loader --save

npm install vue-style-loader --save

npm install css-loader --save

npm install less --save

npm install less-loader --save

全部下载完成，执行npm run dev

 

5.vue3脚手架

1.执行npm install -g @vue/cli 下载新版本vue-cli

2. 进入保存项目的文件目录，执行vue create 项目名 选择相关配置创建项目

3. .进入项目目录，执行npm install 加载项目运行环境，执行npm run serve 启动项目

4. 进入项目目录 执行 npm install vant --save

vant 组件库 element 组件库 vux组件库 

vant tabbar 的使用

// 注册使用vant所有的组件 在main.js中引入

import Vant from "vant"

import "vant/lib/index.css"

Vue.use(Vant)

5.在router.js中配置项目路由，类似于导航条在每个页面都出现的内容可以放在APP.vue中

mounted()中发送请求   methods中定义函数 data(){return数据 }中存放数据 

 

6.react框架（单文件）

下载相关js文件引入 

<!-- babel.min.js 将ES6语法转换为ES5 -->

<script src="babel.min.js"></script>

<script src="react.min.js"></script>

<script src="react-dom.min.js"></script>

<script type="text/babel">

// react 推荐使用jsx语言进行开发，jsx是一种js和html混写的语言

// 在jsx中可以编写一些html代码，html就是一段表达式

// 编写第一个react组件

// 声明react组件有两种方式，函数声明和类声明法

// 参数1，组件的传值 参数2 组件状态(数据仓库)

function MyCom(props,state) {

// 函数中返回组件的模板

return (

<div>

<p>这是我的Com组件</p>

<p>{props.m}</p>

</div>

)

}

// 类声明法 使用ES6中的类声明方法，推荐使用这种方式，功能比较完善

// 使用类声明组件，必须继承自React.Component

class MyComTwo extends React.Component{

// constructor 初始化函数

constructor(params){

// 必须要先执行父类中的构造函数，并将参数传入

super(params)

// arguments 参数列表 第一个参数就是组件的传值

this.props = arguments[0]

console.log(this.props)

}

// 在组件类的声明中，必须实现render，返回组件模板

render(){

// 模板代码推荐使用()括号包裹

return (

<div>

<p>这是我的第二个组件</p>

<p>{this.props.k}</p>

</div>

)

}

}

// ReactDom.reander方法，用于将一段html渲染到某个元素中

// 1.要渲染的html代码 2.要渲染到哪个节点中

ReactDOM.render(

(

<div>

<h1>Hello World</h1>

// 组件声明之后可以直接使用，不需要注册

<MyCom m="你好" />

<MyComTwo k="123" />

</div>

),

document.getElementById('app')

)

</script>

 

7.react框架（脚手架项目）

1.下载   打开命令行工具执行以下代码

npm install -g create-react-app  下载react        

create-react-app 项目名  创建react项目

npm install react-router-dom --save   下载相关小工具

npm uninstall create-react-app  卸载react

 

2.创建页面跳转的相关导航条

进入项目目录执行   npm install react-router-dom --save   下载相关（路由）小工具

 // 引入 react中的路由

import {Route, HashRouter, Link, Switch} from "react-router-dom"

在app.js中的div里进行配置 

{/* HashRouter 组件是路由师徒，相当于vue中的router-view */}

<HashRouter>

<h1>这是根组件，在这里自定义tabbar</h1>

    <ul>

        <li>

            {/* Link 组件是路由链接 相当于vue中的router-link */}

            <Link to="/">首页</Link>

        </li>

        <li>

            <Link to="/my">我的</Link>

        </li>

    </ul>

{/* Switch 组件中嵌套的多个Route只能匹配到一个 */}

{/* 在Switch中可以定义具体的路由规则 */}

{/* Route 定义路由规则 react中的路由默认采用开头匹配的规则 path="/xxx",只要已/xxx

开头的地址都能匹配到如果要拍完整匹配九要使用严格模式 添加exact属性，完整匹配路由*/}

<Switch>

    <Route exact path="/" component={Home}></Route>

    <Route exact path="/my" component={my}></Route>

</Switch>

</HashRouter> 

 

3.// 单标签必须加/表示标签结束<img key={i} src={b.fields.img_src} />

componentWillUnmount 生命周期函数组件被销毁时执行，

componentDidMount()生命周期函数在组件渲染完成时候执行 用来发送请求

// class类声明组件，必须实现render函数，返回组件模板

 

4.发送请求  首先进入目录打开命令行工具执行 npm install axios --save 下载axios

componentDidMount()生命周期函数在组件开始渲染的时候执行，所以在它里面发请求

componentDidMount(){

console.log(this)

// vue中请求执行的then中。this指向请求对象

// react中，请求执行后的then中，this依然指向组件对象

axios.get("http://www.moblie.site:88/banner/")

.then(res=>{

console.log(res)

// 把数据写入state中

this.setState({

banner:res.data.data

})

})

}

 

5.创建一个组件 this.state = {中存放数据}

// 导出组件对象 export default 组件名

// state 组件对象state属性，表示组件的状态(数据),在构造函数中进行初始化,值是一个对象

constructor() 组件的构造函数，当组件被创建时自动调用，相当于vue中的created

// 组件的构造函数，当组件被创建时自动调用，相当于vue中的created

constructor(params){

super(params)

this.state = {

books:[

{name:"JavaScript从零开始", price:29.9},

{name:"HTML从零开始", price:25},

{name:"Python从零开始", price:28}

],

txt:"这是输入框中的内容",

show:true

}

 

this.state.banner.map((b,i)=>{ return 返回标签}//map 循环遍历列表中的数据

首先在js中引入 import React,{Component} from 'react'

class 组件名 extends Component{

constructor(params){

super(params)

 

this.state = {

banner:[]

}

}

{/* className 代替class 因为es6中class表示声明一个类 */}

// / class类声明组件，必须实现render函数，函数中返回组件的模板

 

 render(){   

return (

<div>

{/* className 代替class 因为es6中class表示声明一个类 */}

<h1 className="MyCom-title">这是MyCom组件</h1>

{/* 可以使用当前state中的参数 */}

<p>数字：{this.state.num} 文本：{this.state.txt}</p>

<p>传递的参数：{this.props.name}</p>

<p>传递的参数：{this.props.age}</p>

{/* {this.btnClick} */}

<button onClick={this.btnClick}>点我</button>

</div>

)

}

6.// 类声明法 使用ES6中的类声明方法，推荐使用这种方式，功能比较完善

// 使用类声明组件，必须继承自React.Component

class MyComTwo extends React.Component{

// constructor 初始化函数

constructor(params){

// 必须要先执行父类中的构造函数，并将参数传入

super(params)

// arguments 参数列表 第一个参数就是组件的传值

this.props = arguments[0]

console.log(this.props)

}

// 在组件类的声明中，必须实现render，返回组件模板

render(){

// 模板代码推荐使用()括号包裹

return (

<div>

<p>这是我的第二个组件</p>

<p>{this.props.k}</p>

</div>

)

}

}

 

7.{/* 绑定事件的传参数 需要在执行函数中手动调用指定函数，并传参数*/}

<button onClick={e=>this.buyClick(e,b)}>购买</button>

buyClick(e,b){

console.log(b)

// 如果是点击进行传值，在事件函数中，this指向当前组件对象，因为函数是被this调用的

console.log(this)

}

{/* react 中没有直接的数据双向绑定，必须通过手动添加事件监听实现双向绑定 */}

<input type="text" value={this.state.txt} onChange={e=>this.txtChange(e)}/>

<p>{this.state.txt}</p> txt的值随着输入值的变化而变化，实现双向绑定

 

txtChange(e){

    this.setState({

        txt:e.target.value

    })

}

{/* 多选框选中状态，绑定一个布尔值 checked属性 */}

<input type="checkbox" checked={this.state.show} onChange={e=>{

// 在模板中绑定事件函数内，this指向组件对象

this.setState({show:e.target.checked})

}}/>

{/* react中不能直接渲染布尔类型数据 */}

<p>{this.state.show?"true":"false"}</p>

{/* 条件渲染使用三目运算符 */}

{this.state.show?(<h1>正在营业</h1>):(<h1>暂停营业</h1>)}

8.// 改变组件中函数调用时this的指向，在组件的初始化函数中，

将函数执行时的this指向当前的组件对象 this.btnClick = this.btnClick.bind(this)

// this 在react中，组件中的事件函数this默认指向undefined，如果想让this指向组件本身，可以手动绑定

// 直接通过this.state 修改值，值可以改变，但是无法同步到页面

// this.state.num = 200

// this.setState 使用这种方式修改state中的值，可以同步到页面上

this.setState({

num:this.state.num + 1

})

 

印象笔记，让记忆永存。下载印象笔记